【Vue3】中全局事件总线 $bus 的使用

已于 2022-07-23 00:39:49 修改
阅读量5.1k 收藏 13
点赞数 4
分类专栏： Vue 文章标签： javascript 前端 vue.js
于 2022-07-23 00:38:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kyrie__Wu/article/details/125942099
版权
本文介绍了在Vue3中如何使用全局事件总线$bus，包括在main.js中定义$bus，以及在组件中如何应用。推荐使用mitt或tiny-emitter实现事件触发器接口，供组件间通信。
摘要由CSDN通过智能技术生成

vue3 全局事件总线

1. 在main.js文件中定义$bus

  与vue2不同的是，在vue3中不能直接使用

    new Vue({
   
	     ...
	     beforeCreate() {
   
		Vue.prototype.$bus = this
	}
}).
最低0.47元/天 解锁文章
前端Kyrie
关注
专栏目录
组件间通信（全局事件总线）vue3 --第五节
weixin_51034048的博客
11-12 462
vue3用插件实现事件总线，
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 505
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
【vue3】mitt的使用（全局事件总线$bus：实现父子组件通信）
weixin_61972561的博客
07-29 414
【vue3】mitt的使用（全局事件总线$bus：实现父子组件通信）
超详细的 | vue3组件之间的通信方式（二，兄弟组件）(全局事件总线mitt,$bus、provide和inject方法、pinia)
最新发布
weixin_48642777的博客
08-30 1644
Vue3中，组件之间的通信方式也有了一些新的变化。本文将详细介绍三种Vue3，setup语法糖中兄弟组件之间通信的方式：全局事件总线mitt，$bus、provide和inject方法、以及pinia。
浅谈vue中$bus的使用和涉及到的问题
10-15
主要介绍了浅谈vue中$bus的使用和涉及到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 使用$bus事件总线
qq_41577134的博客
08-27 3020
1.安装mitt npm i mitt 2.在main.js注册 // ... import mitt from 'mitt' const $bus = {} const emitter = mitt() $bus.$on = emitter.on $bus.$emit = emitter.emit $bus.$off = emitter.off app.config.globalProperties.$bus = $bus app.mount('#app') 3.使用 3
Vue3 $bus使用方式
weixin_39428080的博客
07-14 645
Vue3 $bus
Vue3中使用事件总线bus进行深层组件间的通讯
Q10_01Q的博客
08-08 1191
vue3中prototype属性被取消了，不能再使用Vue2中的方式来使用全局事件总线，目前在Vue3中推荐使用mitt这个第三方库去实现全局事件总线。
Vue中的$Bus使用
RopeHuo
02-19 2631
Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两个兄弟组建 C2.vue <template> <view> <h1>c2</h1> </view&gt...
vue2全局事件总线$bus
08-29
Vue 2 中的全局事件总线 $bus 是一种用于在组件之间进行通信的机制。它基于 Vue 实例的事件系统，在任何地方都可以使用。 要使用 $bus，您需要创建一个新的 Vue 实例并将其作为全局事件总线。在创建这个实例后，您...
vue3 使用Bus总线
小米粒的博客
06-09 4028
ts +vue3 1. main.ts 引入 import mitt from "mitt" app.config.globalProperties.$bus = mitt(); 2.在传数据里 import {Emitter} from 'mitt' const {ctx: $this}: any = getCurrentInstance(); const bus = $this.$bus as Emitter; //排序 const sortFun = (sortCase:
vue3 Bus总线的使用
limingxiangIS的博客
08-09 1073
以上就是今天要讲的内容,欢迎指出错误的地方，或者有什么不同的见解请私信。
探索 Vue 中的 bus.$emit：实现组件通信的强大工具
你若盛开，清风自来
11-25 2719
在 Vue 中，父子组件之间可以通过 props 和 events 进行通信。 然而，当需要在多个不相关的组件之间进行通信时，使用bus.$emit可以提供一种更灵活的方式。
vue3中（兄弟父子传参）Bus详解和使用Mitt
weixin_44166849的博客
05-04 711
vue3中（兄弟父子传参）Bus详解和使用Mitt
vue3和vue2中bus的使用
kanno的博客
08-04 2088
vue3和vue2中bus的使用 说明：为了解决组件间的通信，也就是组件与组件间的数据传递(它们之间毫无关系)；这里以组件1传递数据到组件2为例。1.首先新建一个Bus.js文件。
vue3.0中使用bus总线
热门推荐
weixin_49203377的博客
05-13 1万+
背景 在使用vue3.0做后台管理系统的过程中，需要实现兄弟组件间的通信，一个组件触发事件，另一个组件接收到事件后执行某操作 Vue3.0集成Bus Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线 Vue3.0中使用emit来注册 bus.emit(‘事件’,参数) Vue3.0中使用on来监听，bus.on(‘taskLrowClick’, (e)=>{ console.log(e)；其他的逻辑操作 }) emit和on是成对出现的，一个发起，一个接收
Vue2和Vue3组件间通信方式汇总（3）------$bus
qq_50276105的博客
12-23 1068
组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。
Vue3中使用事件总线Bus的两种方式（mitt）
LLL3189860667的博客
08-01 2820
接下来介绍Vue3中通过mitt使用事件总线Bus的两种方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值