Vue2 Laravel5.3イベントで子供から親にデータを送信する方法

Question

私がここで達成しようとしているのは、Item-card-product-choices.vueの項目をクリックするとselectPCと引き数productChoice.idがトリガーされ、このイベントと同時に引数を取得します。私はthe docに従うが、親はselectPCを聞いていないようだ。ですから、次の質問を解決してください。

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" あなたので、あなた

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

で、そのためにリッスンする必要があります方法は、私は `$ emit`を使用しない場合、私は共有ドキュメントによると、親は実際に子右の方法を聞くことができますか？だから、

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