vue中eventBus的使用

本文介绍如何在Vue应用中使用eventBus解决非父子组件间的通信问题,通过定义eventBus实例并挂载到Vue原型,展示从创建eventBus、引入到子组件的交互过程。

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

eventBus是用于组件间通讯的一种方法,我们都知道在vue中数据流是单向的,那么非父子组件间的传值自然值得我们注意

一种是我们都很熟悉的vuex;它可以通过仓库沟通我们所有组件间的通信;而另外还存在一种叫做eventBus的方法:

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

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

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

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

import eventBUs from ‘…/…/utils/eventBus.js’

3.子组件childone声明发布(声明)事件,通常在mounted或created中声明:
    
  created() {
     eventBus.$on(‘getTarget’, target => {
      console.log(target);
     });
   }

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

methods: {
    addCart(event) {
      eventBus.$emit(‘getTarget’, event.target);
     }
   }

这就是一个完整的eventBus通信。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值