Vue2 Laravel5.3如何發送數據從小孩到父母的事件

Question

我在這裏試圖實現的是，當我點擊Item-card-product-choices.vue中的項目時，它將觸發selectPC，參數productChoice.id，這也會觸發父母收聽這個事件並且在同一時間得到參數。我按照the doc做但父母似乎不聽selectPC。所以請解決以下問題senpai：

1. 我的方式爲家長傾聽孩子的事件有什麼問題嗎？
2. 當父母監聽時，如何獲得孩子在事件中使用的參數呢？ 謝謝。

項目 - 卡產品choices.vue

<template> 
    <ul class="product-choices"> 
    <li 
    v-for="productChoice in productChoices" 
    class="product-choice" 
    @click.prevent="selectPC(productChoice.id)" 
    > 
     <svg v-if="productChoice.color === 'red'" width="20" height="20"> 
     <rect width="20" height="20" style="fill:#FF3333"></rect> 
     </svg> 
     ...... 
     ...... 
     ...... 
    </li> 
    </ul> 
</template> 

<script> 
    export default { 
    props:[ 
     'index', 
     'product' 
    ], 
    data() { 
     return { 
     productChoices:{}, 
     } 
    }, 
    methods:{ 
     selectPC(productChoice){ 
     var vm = this; 
     vm.$emit('select',productChoice) 
     }, 
    } 
    } 
</script> 

Parent.vue

<template> 
    <div> 
    .... 
    <product-choices :product="product" @selectPC="getSelected(productChoice)"></product-choices> 
    .... 
    </div> 
</template> 

<script> 
    import productChoices from './Item-card-product-choices.vue'; 
    export default { 
    components:{ 
     'product-choices':productChoices 
    }, 
    data(){ 
     return{ 
     productChoiceSelected:{}, 
     } 
    }, 
    methods:{ 
     getSelected(selected){ 
     var vm = this 
      alert(1) // this is what I added to test if it listens 
     vm.$on('select',function(selected){ 
      vm.$http.get('/getProductChoice/'+vm.product.id+'/'+selected).then((response)=>{ 
      vm.productChoiceSelected = response.data 
      }); 
     }) 
     } 
    } 
</script> 

Answer 1

你發射被命名事件 「選擇」，而不是 「selectPC」 所以你需要Parent.vue

<product-choices :product="product" @select="getSelected"></product-choices> 

你聽爲方法不應該添加一個$on聽衆要麼...

getSelected(selected) { 
    this.$http.get('/getProductChoice/' + this.product.id + '/' + selected).then(response => { 
    this.productChoiceSelected = response.data 
    }) 
}