vue中的$emit()(子传父)——调用组件的自定义事件

父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：

父组件中：======================v-on监听子组件事件

         @item-click="cpnClick"

         cpnClick(item){

                  console.log("cpnClick",item)

          }

子组件中：======================$emit()触发事件

         //参数一：自定义事件名称

         this.$emit('item-click',item)

例子：

父组件中：

<div id="app">
     <cpn @item-click="cpnClick"></cpn>
</div>

<script>
const app=new Vue({
       el:"#app",
       components:{cpn},
       methods:{
         cpnClick(item){----------------从子组件传递过来的参数值
           console.log("cpnClick",item)
         }
       }
});
</script>
 

子组件：

<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>

<script>
methods:{
    btnClick(item){
        //参数一：事件名称(自己定义即可)
        this.$emit('item-click',item)
    }
}
</script>