Vue全局事件总线（兄弟组件之间传值）

最新推荐文章于 2024-02-23 17:56:29 发布

T-腾腾

最新推荐文章于 2024-02-23 17:56:29 发布

阅读量1.6k

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_50832030/article/details/123509297

版权

Vue.js 专栏收录该内容

9 篇文章

订阅专栏

1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例)

2、使用事件总线。

一、提供数据的组件：使用$bus的$emit Api去传值给A组件

二、接收数据组件比如：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身，可以在mounted钩子中接受数据

3、最好在接收数据的组件中的beforeDestroy钩子中，用$bus的$off Api去解绑当前组件所用的事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

T-腾腾

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 事件总线 兄弟组件之间传值

weixin_43835059的博客

02-12

786

Vue事件总线 evenbus 兄弟组件之间传值 vue传值方式主要有四种 1.路由带参数传值 2.父子组件之间传值，父传子用props，子传父用emit 3.如果是大项目可以使用vuex传值，小项目少页面可以使用evenbus之间进行传值事件总线之间传值可以分为两种，一种全局事件传值，一种单独设一个js文件进行引用传值第一种：全局使用，在main.js中用vue的原型对象上添加一个bus...

vue事件总线EventBus(兄弟组件之间的传值)

qq_53061847的博客

09-13

2372

EventBus又称为事件总线，相当于一个全局的仓库，任何组件都可以在这个仓库里面获取事件。

参与评论您还未登录，请先登录后发表或查看评论

Vue中兄弟组件间传值

zoukunyang的博客

08-23

2239

Vue中父组件向子组件传递参数时，可以通过prop；子组件向父组件传递参数时，通过$emit来传递。那么父组件下有多个子组件时怎么实现子组件间的数据传递呢？可以创建一个Vue实例作为第三方媒介实现数据的传递。下面是具体的步骤。

vue中，兄弟组件之间传值

weixin_44867717的博客

04-12

2603

vue中，兄弟组件之间传值项目中，需要使用多个子组件，当需要传递值的时候，较为麻烦，怎样实现呢 1、一般可以使用子组件a传递给父组件，再由父组件传递给子组件b。但是一般较为麻烦， 2、使用bus作为中介，来传递ab组件之间的值首先，创建bus.js文件，一般在src目录下，第一步：src/bus.js import Vue from 'vue'; export default new Vue; 其次，在组件a中，（只是截取部分代码，此处仅有触发传递的代码）第二步：a.vue-发送数据 <el

Vue中兄弟组件之间传值

jq2588的博客

02-23

849

在中，我们在使用不同组件的时候，组件之间可能会需要相互传值。以下有三种兄弟组件之间传值的方法。// 这里我让Older组件向younger组件传值// 父组件divOlder:msg-olderchange"change"

vue中兄弟组件之间传值

Liux- 的博客

03-05

3546

Vue中组件传值，兄弟组件之间传值

vue 兄弟组件之间的传值

seimeii的博客

07-29

3980

vue兄弟之间的传值

Vue.js中兄弟组件之间互相传值实例

10-19

本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central Event Bus），也被称为中转站，来实现兄弟组件间的通信。首先，需要了解的是，在Vue.js中，组件通过声明式的嵌套来构建...

Vue非父子组件之间传值

01-08

首先，创建一个全局的事件总线，通常是在Vue实例的原型链上添加一个属性，这样所有组件都能访问到它。代码如下： ```javascript Vue.prototype.bus = new Vue() ``` 然后，我们定义一个名为`child`的组件，这个...

vue 组件间的通信之子组件向父组件传值的方式

11-20

对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。 ```javascript // eventBus.js import Vue from 'vue' export const EventBus = new Vue() ```...

vue.js 兄弟组件之间的值传递方法

jingtian678的博客

08-13

5709

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数...

VUE 兄弟组件之间传值

qq_29850249的博客

03-30

376

Vue兄弟组件传值创建一个公共实例文件 Bus.js import Vue from 'vue' const bus=new Vue() export default bus 子组件 A.vue <template> <div> <button @click='emitMessage'>传给兄弟组件信息</button> </div...

Vue兄弟组件之间传值

weixin_45735398的博客

05-20

725

兄弟组件之间用Vue实例传示例： <div id="app"> <ca></ca> <cb></cb> </div> var bus=new Vue();//定义一个Vue实例 Vue.component('ca', template:` <div> <h1>组件A</h1> <button @click="sendEvent">发送</button>

vue兄弟组件之间传值

yige_lanren的博客

01-12

518

Vue兄弟组件之间传值，eventBus，简单高效！！！

学习笔记——Vue中兄弟组件之间传值

qq_41339126的博客

10-30

2805

在vue中，我们在使用不同组件时，可能在同一个页面使用的两个组件具有耦合性，组件之间可能会需要相互传值。以下就是三种兄弟组件之间传值的方法。 1.通过父组件传递： // 这里我让Older组件向younger组件传值 // 父组件 <template> <div> <Older :msg-older="msgFather" @change="change"></Older> <Younger :msg-younger="msgFat.

Vue中兄弟组件之间的传值方法

blinH的博客

11-14

887

兄弟组件传值 兄弟组件之间传值使用的是$bus的传值方式同目录下创建bus.js，在里面写上以下代码： // bus.js中只需要写这么多就ok export default { install(Vue){ Vue.prototype.$bus = new Vue({}); } }; 创建后在main.js中引用bus.js，并调用 import bus from './bus.js'; Vue.use(bus); 兄弟传值：传值方 ...

vue全局总线传参

m0_53865445的博客

01-04

333

vue全局总线传参

Vue兄弟组件间传值之 get传值

哈

11-20

359

第一步：在新建的views目录下创建如下所示的两个组件： News.vue <template> <div> <h2>{{msg}}</h2><br> <ul> <li v-for="(item ,index) in titles" :key="index"> <router-link :to="'/details?nid='+index">{{index}}-

vue 兄弟组件之间传值

最新发布

04-21

<think>好的，用户想了解在Vue中如何实现兄弟组件之间的传值方法。我需要先回忆一下Vue3中兄弟组件通信的几种方式。根据之前提供的引用，主要有两种方法：使用Mitt插件或者利用provide和inject的响应式API。另外，还有通过事件总线（Bus）的方式，不过这在Vue3中可能需要自己实现，或者使用第三方库如Mitt。首先，用户可能已经了解过Vue2中的事件总线，但在Vue3中，官方移除了$on等方法，所以需要替代方案。Mitt是一个轻量的事件总线库，适用于Vue3。步骤包括安装Mitt，创建事件总线实例，然后在兄弟组件中分别使用emit和on来触发和监听事件。需要确保两个组件引用的是同一个事件总线实例，通常会在全局注册。另一种方法是使用provide和inject配合响应式数据。父组件提供一个响应式的对象，兄弟组件通过inject获取这个对象，并修改其中的数据。这样，当数据变化时，所有注入该数据的组件都会更新。需要注意的是，Vue3的provide/inject默认不是响应式的，所以必须使用ref或reactive来包装数据。用户可能关心哪种方法更推荐。Mitt适合事件驱动的通信，而provide/inject适合共享状态。如果项目已经使用Pinia或Vuex，可能更推荐状态管理库来处理兄弟组件通信，但用户的问题没有提到这些，所以暂时不引入。另外，引用中的示例代码显示在子组件中使用$emit，但Vue3中兄弟组件不能直接通过父组件传递事件，需要父组件作为中介，或者使用事件总线。所以需要区分子组件和兄弟组件的场景。需要确保回答结构清晰，分点说明每种方法，并给出示例代码。同时，根据用户提供的引用，正确引用来源，比如Mitt方法引用[^1]，事件总线引用[^3]，而引用[^2]中的例子可能不适用于兄弟组件，因为$emit需要父组件监听，所以可能需要指出那种方式适用于父子而非兄弟，避免混淆。最后，生成相关问题，比如性能比较、其他方法如Vuex，或者具体使用场景，帮助用户深入理解。</think>在 Vue3 中实现兄弟组件通信的常用方法主要有以下两种方式，均支持响应式数据传递： --- ### 一、使用 Mitt 事件总线（推荐） 1. **安装 Mitt 插件** ```bash npm install mitt ``` 2. **创建全局事件总线** ```javascript // src/utils/bus.js import mitt from 'mitt' export default mitt() ``` 3. **组件 A 发送事件** ```vue <script setup> import bus from '@/utils/bus' const sendData = () => { bus.emit('customEvent', { value: '数据内容' }) } </script> ``` 4. **组件 B 接收事件** ```vue <script setup> import bus from '@/utils/bus' import { onMounted } from 'vue' onMounted(() => { bus.on('customEvent', (data) => { console.log('接收数据:', data.value) // 输出：数据内容 }) }) </script> ``` **特点**：解耦组件关系，适合跨层级通信[^1][^3] --- ### 二、使用 provide/inject + 响应式状态 1. **父组件提供共享状态** ```vue <script setup> import { provide, reactive } from 'vue' const sharedState = reactive({ message: '' }) provide('sharedKey', sharedState) </script> <template> <ComponentA /> <ComponentB /> </template> ``` 2. **兄弟组件修改状态** ```vue  <script setup> import { inject } from 'vue' const state = inject('sharedKey') state.message = '来自A的数据' </script> ``` 3. **兄弟组件读取状态** ```vue  <script setup> import { inject } from 'vue' const state = inject('sharedKey') console.log(state.message) // 输出：来自A的数据 </script> ``` **特点**：适合需要持久化共享的状态[^1] --- ### 性能对比 | 方法 | 适用场景 | 数据流向 | |-----------|----------------------|------------| | Mitt | 瞬时事件通信（表单提交/通知） | 单向/双向 | | provide | 需要长期维护的共享状态（主题/配置） | 集中式状态管理 | ---