子级向父级传递

自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件中，通过v-on：/@来监听子组件事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
<cpn v-on:item-click="cpnClick"></cpn>
</div>

<!--2.子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../../vue.min.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) {
        // console.log(item)
        //发射事件：自定义事件
        this.$emit('item-click',item)
      }
    }

  }

  //2.父组件
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      cpn
    },
    methods:{
      cpnClick(item){
        console.log('cpnClick',item)
      }
    }
  })
</script>
</body>
</html>

原文链接：https://blog.csdn.net/vfjcgg/article/details/106819348