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

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>