Vue2 Laravel5.3 Как отправить данные от дочернего к родительскому событию

Question

То, что я пытаюсь достичь здесь, заключается в том, что когда я нажимаю на элемент в Item-card-product-choices.vue, он вызывает selectPC с аргументом productChoice.id, и это также приведет к тому, что родитель сможет прослушать это событие и получить аргумент в то же время. Я следую the doc, но родитель, похоже, не прослушивает selectPC. Поэтому, пожалуйста, решите следующие вопросы senpai:

1. Что случилось с моим родителем, чтобы выслушать событие ребенка?
2. Когда родитель прислушивается, как получить аргумент, который использует ребенок в событии? Спасибо.

Item-карты продукта 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> 

Ваш getSelected метод не должен добавить $on слушателя либо ...

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