vue:兄弟传参,使用eventBus

本文介绍了如何在Vue应用中通过eventBus实现实例间的通信,重点讲解了创建eventBus实例、子组件间的事件发布与订阅,以及在父子组件间传递数据的方法。

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

使用场景如:兄弟组件间的通信,父组件fatherCom中同时使用到childOne和childTwo两个兄弟组件,点击子组件childTwo需要另一子组件ChildOne响应

一:定义eventBus,建立eventBus.js文件,挂载到Vue实例上,暴露出去:

 import Vue from 'vue';
  let bus = new Vue();
  Vue.prototype.$eventBus = bus;
  export default bus;

二:使用到eventBus的兄弟组件都引入eventBus.js:

import eventBus from '../EventBus/EvemtBus.js'

三:子组件childone声明发布(声明)事件,通常在mounted或created中声明:

created() {
     eventBus.$on('getTarget', target => {
      console.log(target);
     });
   }

四:子组件childtwo订阅(触发)事件:

methods: {
    addCart(event) {
      eventBus.$emit('getTarget', event.target);
     }
   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值