子级向父级传递（自定义事件）

props用于父组件向子组件传递数据，子组件向父组件传递需要使用自定义事件来完成
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件
我们之前学的v-on不仅仅可以用于监听DOM事件，也可以用于组件之间的自定义事件
自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <!-- 父组件模板 -->
  <div id="app">
     <cpn v-on:itemclick="cpnClick"></cpn> //监听子组件发射的事件
  </div>
  <!-- 子组件模板 -->
  <template id="cpn">
   <div>
     <button v-for="item in categories" @click="btnClick(item)">
     {{item.name}}
     </button>
   </div>
  </template>
  <script src="js/vue.js"></script>
  <script>
   //1、子组件
   
   const cpn={
    template:"#cpn",
    data(){
     return{
      categories:[
        {id:'aaa',name:'热门推荐'},
        {id:'bbb',name:'手机数码'},
        {id:'ccc',name:'家用家电'},
        {id:'ddd',name:'电脑办公'},
      ]
     }
    },
    methods:{
     btnClick(item){
      //发出一个事件(自定义事件)
      this.$emit('itemclick',item) 
     }
    }
    
   }
   
   //2、父组件
   const app = new Vue({
    el:"#app",
    data:{
     
    },
    components:{
     cpn
    },
    methods:{
     cpnClick(item){
      console.log("cpnClick",item);
     }
    }
   })
  </script>
 </body>
</html>

原文链接：https://blog.csdn.net/XUYIGE/article/details/108498398