Vue2 Laravel5.3 如何在事件中将数据从 child 发送到 parent

Question

我想在这里实现的是，当我点击 Item-card-product-choices.vue 中的项目时，它将触发 selectPC 参数 productChoice.id 并且这也会触发 parent 来监听这个事件，同时获取参数。我是跟着the doc做的但是parent好像不听selectPC。所以请前辈解决以下问题：

我的 parent 收听 child 活动的方式有什么问题？
当parent监听时，如何获取事件中child使用的参数呢？谢谢。

Item-card-product-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

您发出的事件名为 "select"，而不是 "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
  })
}

Vue2 Laravel5.3 如何在事件中将数据从 child 发送到 parent

Vue2 Laravel5.3 How to send data from child to parent on event

vue.js

laravel-5.3

vuejs2