vue3.0中使用bus总线和vue2.0中使用bus总线

最新推荐文章于 2024-08-30 14:04:24 发布
最新推荐文章于 2024-08-30 14:04:24 发布
阅读量745 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43267086/article/details/118947021
版权
Vue3.0的Bus总线改用mitt实现，使用`emit`注册事件和`on`监听事件。与Vue2.0通过创建空Vue实例不同，Vue3.0的`emit`和`on`对应事件的触发和接收，多个组件可监听同一事件。
摘要由CSDN通过智能技术生成

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是成对出现的，一个发起，一个接收，并且接收方可以是多个组件，只要第一个参数匹配，都可以接收到
 

3.0，，2.0

3.0，，2.0 

  3.0

最低0.47元/天 解锁文章
城市猎人吴泪
关注
vue2.0组件传值 bus
weixin_41141811的博客
08-18 321
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中间
vue2.0 中央控制总线 Bus
weixin_45563734的博客
11-28 643
vue2.0 中央控制总线 Bus
超详细的 | vue3组件之间的通信方式（二，兄弟组件）(全局事件总线mitt,$bus、provide和inject方法、pinia)
最新发布
weixin_48642777的博客
08-30 1541
Vue3中，组件之间的通信方式也有了一些新的变化。本文将详细介绍三种Vue3，setup语法糖中兄弟组件之间通信的方式：全局事件总线mitt，$bus、provide和inject方法、以及pinia。
vue3.0与vue2.0中使用事务总线
weixin_43820535的博客
08-04 258
vue3.0与vue2.0中使用事务总线 vue2.0的事务总线通过创建一个空vue来注册（emit）和监听（emit）和监听（emit）和监听（on）实现，但升级到3.0后，取消了on、on、on、off、once，只保留了once，只保留了once，只保留了emit，因此在3.0中我们只能另寻他法，官方推荐使用第三方库mitt来进行实现： （1）vue2.0事务总线实现方式 新建bus.js文件 import Vue from 'vue'; export default new Vue(); 在mai
vue2.0+中eventBus实现兄弟组件通信
chern1992的博客
04-18 1244
特殊需求下兄弟组件间通讯
VUE2.0学习记录——非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)
baokx的专栏
08-13 215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件之间的传值(BUS/总线/发布订阅者模式/观察者模式)</title> </head> <body> <div id="app"&...
vue3.0如何使用bus总线传值
09-10
### 回答1： Vue3.0可以使用Vue.observable来实现bus总线传值，可以在不同组件之间共享状态。...通过以上步骤，我们就可以在Vue 3.0中使用事件总线（event bus）来实现组件之间的通信和值的传递。
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
总之，解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
浅谈vue中$bus的使用和涉及到的问题
10-15
Vue.js中的$bus，也被称作事件总线或中央事件总线，是一个能够帮助开发者在组件间进行通信的工具，尤其在非父子关系的组件间通信时显得尤为重要。$bus利用了Vue实例的原型属性，让所有组件都可以访问到它，进而实现...
vue总线机制(bus)知识点详解
01-19
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅...
Vue 2.0学习笔记：事件总线（EventBus）
小酒屋
11-24 526
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 参考资料： https:...
「VUE架构」Vue2.0 EventBus父子组件通信（传参）
AIGC大前端小王子
07-17 1193
本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。 一、初始化 首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.js imp......
【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
道阻且长，行则将至。
10-23 268
【代码】【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）
vue3.0之Bus总线的实现
weixin_43845137的博客
03-13 1920
目录vue3.0之Bus总线的实现Bus.tsmain.vue 根组件B.vueC.vue vue3.0之Bus总线的实现 Bus.ts 项目根目录下创建 Bus.ts文件 type BusClass<T> = { emit:(name:T) => void on:(name:T,callback:Function) => void } type BusParams = string | number | symbol type List = { [key:BusPa
【vue3】mitt的使用（全局事件总线$bus：实现父子组件通信）
weixin_61972561的博客
07-29 387
【vue3】mitt的使用（全局事件总线$bus：实现父子组件通信）
Vue——使用mitt
qq812457115的博客
02-27 645
【代码】Vue——使用mitt。
vue3 mitt 替换EventBus
m0_65730686的博客
10-21 856
vue3 mitt 替换EventBus
Vue实现非父子组件通信，关于mitt的封装。
Blog沙漏在下雨
04-22 748
在Vue中， 怎样使用mitt实现非父子之间的通信， 相对于父子之间直接通信使用props和emit发射事件， 如果层级嵌套很深，则使用 provide 和 inject 去实现通信， 但是还有一种办法， 就是之前vue2 的 全局总线bus, 但是文档提示我们在vue3中去使用emitt 和 mitt 替换他们， 最后使用了 mitt去实现， 最后封装一下.
Vue2.0原理篇
酷奇的博客
05-31 1690
一句话总结Vue原理，面试/复习必看！！！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值