二十、父子组件的通信（子组件向父组件传递数据）

props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。

这个时候,我们需要使用自定义事件来完成。

■什么时候需要自定义事件呢?

当子组件需要向父组件传递数据时,就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。

■自定义事件的流程:

在子组件中,通过$emit()来触发事件。
在父组件中,通过v-on来监听子组件事件。

<div id="app">
  <!-- <cpn v-on:itemclick=""></cpn> -->
  <cpn @itemclick="cpnClick"></cpn>
</div>
 
<!-- 子组件模板 -->
<template id="id_cpn">
  <div>
    <button v-for="item in categories" @click="itemClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
 
<script>
  const cpn = {
    template: "#id_cpn",
    data() { 
      return {
         categories: [
           {id: 'aaa', name: "热门推荐"},
           {id: 'bbb', name: "手机数码"},
           {id: 'ccc', name: "家用家电"},
           {id: 'ddd', name: "电脑办公"},
        ]
      }
    },
    methods: {
      itemClick(item){
        //子组件发射事件：自定义事件
        this.$emit("itemclick",item);
      }
    }
  }
 
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World",
      info: {name: "why",age: 18,height: 1.88}
    },
    components:{ 
      cpn:cpn
    },
    methods: {
      cpnClick(item){
        console.log(item);
      }
    }
  });
</script>