Question

我想在这里尝试实现的是，当我点击Item-card-product-choices.vue中的项目时，它将触发带有参数selectPC的{{1}}，这也会触发父母听取此事件并在同一时间得到论点。我按照the doc要求做，但是父母似乎没有听productChoice.id。所以请解决以下问题：

我父母听孩子的事件的方式有什么问题？
当父听，如何获得孩子在事件中使用的参数？感谢。

物品卡产品-choices.vue

selectPC

Parent.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>

Answer 1

您发出的事件被命名为＆＃34;选择＆＃34;而不是＆＃34; selectPC＆＃34;所以你需要在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如何在事件中将数据从子节点发送到父节点

1 个答案: