vue2和vue3 ，bus（事件总线）用于非父子组件传值问题

最新推荐文章于 2024-08-30 14:04:24 发布
最新推荐文章于 2024-08-30 14:04:24 发布
阅读量261 收藏
点赞数 2
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeSentimental/article/details/114674239
版权

vue-cli2

1.main.js
在这里插入图片描述
2.发送
在这里插入图片描述

3.接收
在这里插入图片描述

vue-cli3

1…安装mitt
yarn add mitt
2.在入口文件main.js中引入在这里插入图片描述
3.事件发送在这里插入图片描述
4.事件接收在这里插入图片描述

打印this.$bus
vue-cli2
在这里插入图片描述
在这里插入图片描述

vue-cli3
在这里插入图片描述

Be sentimental
关注
专栏目录
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5083
【Vue 3】中全局事件总线 $bus 的使用
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue2和vue3的全局事件总线
Heartnottowake的博客
04-10 3124
vue2里面的全局事件总线 1，在main.js文件里面调用生命周期函数beforeCreate 在new.Vue实例中 .... beforeCreate(){ Vue.propotype.$name = this //这个name是可以随便更改的，可以使用你想用的名字 .... 2，在组件1中的methods创建一个函数调用，或者说在mounted里面直接调用，都可以 this.$name.$emit('a'，'我是要在组件2显示的值') 这里是使用你的全局事件总线 name 是使用 emit 触发
超详细的 | vue3组件之间的通信方式（二，兄弟组件）(全局事件总线mitt,$bus、provide和inject方法、pinia)
最新发布
weixin_48642777的博客
08-30 1460
Vue3中，组件之间的通信方式也有了一些新的变化。本文将详细介绍三种Vue3，setup语法糖中兄弟组件之间通信的方式：全局事件总线mitt，$bus、provide和inject方法、以及pinia。
在Vue2和Vue3中事件总线的使用与区别
weixin_44582077的博客
07-27 1546
在Vue升级到3.0版本后，事件总线使用的方式有些许改变，Vue2可以直接使用new Vue()；在Vue3中，推荐使用mitt来帮助我们实现全局事件总线和局部事件总线。接下来让我们来对比2和3版本的使用和区别......
Vue中的$Bus使用
RopeHuo
02-19 2615
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...
Vue,vue-cli,父子组件间相互通信
大炮哥的博客
12-07 305
直接上代码！ 首先定义一个子组件： 可以看到，子组件非常简单，就只有一个方法"foo(p1,p2)" <template> <div class="app-container">I am child</div> </template> <script> export default { method: { foo(data, callback) { alert("传递数据给子组件：" + data); ca
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
在Vue中，有多种方式实现组件之间的数据传递，主要包括父子组件间通信和非父子组件间通信。 **一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤...
Vue组件通信中非父子组件传值知识点总结
10-15
在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。这里我们将主要讲解事件总线的方法。 事件总线是一种自定义事件机制，它实际上是一个单独的Vue实例，用来作为组件间通信的桥梁。...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
本文将详细介绍Vue 2.0中三种常用的组件间通信方式：父组件向子组件传值（props）、子组件向父组件传值（事件发射）、以及非父子组件之间的传值方法。 一、父传子（props） 在Vue中，子组件通过props接收来自父组件...
Vue非父子组件之间传值
01-08
这里介绍的就是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）来解决这个问题。 首先，创建一个全局的事件总线，通常是在Vue实例的原型链上添加一个属性，这样所有组件都能访问到它。代码如下： ```...
vue3 使用$bus事件总线
qq_41577134的博客
08-27 2971
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_44166849的博客
12-04 548
vue3路由来回切换 路由跳转新页面在跳转回原来的页面 导致$bus.on回多次调用的问题
vue2事件总线
zhanghaoplc的博客
12-17 400
发射事件 子组件 this.$bus.emit('aaa') 监听事件 父组件 this.$bus.$on("itemImageLoad", () => { refresh(); }); 在原型上绑定$bus main.js vue.prototype.$bus = new Vue() // vue实例是可以作为事件总线的
Vue2和Vue3组件间通信方式汇总（3）------$bus
qq_50276105的博客
12-23 1027
组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。
Vue2——全局事件总线
mantou_riji的博客
07-20 2680
所以所有的组件实例对象都可以通过原型链找到Vue原型对象上的内容。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。为保证所有组件都可以看到x，可以将x放在Vue的原型对象上。需要将赋值为vc（组件实例对象）或vm(vue实例对象)。当组件想要传递数据是去触发X上的事件，可以携带参数。School接收数据，Student组件发送数据。//该组件销毁时记得解绑，避免占用$bus的资源。全局事件总线︰可以实现任意组件间通信。在组件实例对象上可以直接调用。//绑定事件，编写回调函数。.........
vue2脚手架之全局事件总线
小淼淼的博客
10-07 1547
vue2脚手架之全局事件总线
Vue3 事件总线
tengyuxin的博客
05-31 3584
答：一般父子组件通信，就直接使用事件抛出emit就好，但是如果两个组件没有关系 或者 关系嵌套层级很多，就要采用总线事件系统。A组件抛出事件名a，B组件里面，在mounted生命周期监听事件名a，并做出处理。 在其它组件使用
vue常用组件通信方式及vue2和vue3写法对比
~~~
05-19 2154
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。父子组件：props / $emit、 ref / $parent隔代组件：provide / inject、eventBus、Vuex / Pinia兄弟组件：eventBus、Vuex / Pinia写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值