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

最新推荐文章于 2025-02-23 21:59:35 发布

我是你要找的bug

最新推荐文章于 2025-02-23 21:59:35 发布

阅读量626

点赞数

分类专栏： Vue 组件父子组件文章标签： vue

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/108498398

版权

Vue 同时被 3 个专栏收录

19 篇文章

订阅专栏

组件

7 篇文章

订阅专栏

父子组件

3 篇文章

订阅专栏

本文介绍了在Vue中如何使用自定义事件进行子组件向父组件的数据传递。当需要从子组件向父组件传递信息时，可以利用$emit()触发事件，并在父组件中使用v-on进行监听。这种机制是Vue组件间通信的重要方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>