vue里创建bus的两用方法及用法（兄弟传值）

原创 已于 2022-11-09 11:24:19 修改 · 6.9k 阅读 · 19 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
于 2022-01-19 15:02:11 首次发布
本文介绍Vue中Bus和Vuex的使用方法及其适用场景。Bus适用于小规模项目中的组件间通信，通过自定义事件机制实现数据传递；Vuex则更适合中大型项目的数据状态管理。

1.bus用法

 主要是用来帮助父子组件传值

vue中非父子组件之间通信除了用vuex，也可以通过bus总线，两者适用场景不同。

bus比较适合小项目 vuex就不太适用了。bus其实就是利用vue的自定义事件机制，在触发地 方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

2.如何创建bus及用法(两种方法)

（1）第一种方法: 在main.js里创建 挂载原型

        

       // 用法：需要传值组件的写法

        

        //在需要传入值的组件中写法

        

        这样就可以直接拿到传过来的值了

（2）第二种方法 ：新建bus.js文件

        

         bus.js中的内容

        

        用这种方法是需要在两个相互传值的组件中引入此文件

         

         在使用的时候（传值）就只是把this.$bus给去掉了

        

         接收值的时候同理先引入，再用bus.$on在created生命周期里获取

        

 非常的适合组件之间的传值，非常的银杏~

（看不懂的就问奥~）

详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
「VUE架构」Vue2.0 EventBus父子组件通信（传参）
拥抱AI Design
07-17 1445
本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。 一、初始化 首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.js imp......
VUE--公共组件传值并及时监听到数据更新视图
weixin_62355341的博客
03-29 1855
场景：AB两个子组件在 父页面中，（我们险别估损信息为A，立案信息为B） B组件的某个值是和A组件中一样的且A组件值变化B即使监听并渲染.例如：下图总额A组件要把金额传给 B组件的估损金额框，A金额变B也变 金额已经绑定在A组件中 用兄弟传值把A组件的金额传到B组件的估损金额 1.兄弟组件的语法是。先建一个bus.js文件 import Vue from 'vue' export default new Vue() 2.在A组件中引入bus.JS 3....
Vue 事件总线（EventBus）详解
最新发布
csdn_silent的博客
05-21 1518
事件总线是一个发布-订阅模式的实现，它允许组件之间通过事件进行通信，而不需要直接引用对方。
vue中bus的详细使用
热门推荐
weixin_44020340的博客
09-07 2万+
vue中关于兄弟组件bus的使用方法 首先，bus只能用在兄弟组件之间的传值，其它关系的传值不用bus。 废话不多说，请看下面代码解说 首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。 // bus.js文件内容 import Vue from 'vue' // export default new Vue() const Bus = new Vue() export default Bus 局部引用：是在兄弟组件的文件里面引用bus.js文件 全局引用：是在main.
Vue组件交互之bus模式
夕山雨的博客
06-27 4416
目录一、bus模式简介 一、bus模式简介 bus模式是一种借助事件实现任意两组件交互的解决方案。 通常来说，在不借助bus模式的情况下，事件的触发只会发生在父子组件之间，并且只能由子组件向父组件触发事件。它的大致实现模式如下： parent.vue <template> <child @tick="handleTick" ></child> </template> <script> export default { meth
vue兄弟组件之间传值的两种办法
qq_40685103的博客
07-07 1万+
效果展示 第一种办法 通过事件总线bus传值 再main.js里首先声明 Vue.prototype.$bus=new Vue(); 父组件 <template> <div> <child1></child1> <child2></child2> </div> </template> <script> import child1 from './us
uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）
铁锤妹妹的博客
10-31 1万+
在做vue项目或者uniapp开发微信小程序时，经常会用到组件之间传值，因此想总结记录下。
vue兄弟组件传值的3种方法
mrsun_web
08-30 2万+
1，bus总线传值 2，常规子1传父->父传子2 3，vuex 这里详细说明bus总线传值的总路线及方法：本例为基本用法，如果不理解的可以看下面的详细使用方法： //bus.js import Vue from 'vue'; export default new Vue; //使用 兄弟A 传值 import bus from '路径' bus.$emit('自定义事件名称',输出数据) //使用 兄弟B 接值 import bus from '路径' bus.on('自定义事件名',(r
vue中兄弟组件之间的联动，兄弟组件之间的传值
zyz00000000的博客
12-05 2万+
兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作 方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B 第一步：子组件A传值给父组件 通过$emit将e.target.innerText传递给父组件 <template> <div class="initail"> <ul> &l...
vue组件通信---非父子组件（bus）/任意组件间的通信（pubsub）
muzidigbig的博客
11-20 4348
方式一：bus中央总线 利用总线方式可以平级组件进行通信 无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。 第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下 import Vue from 'vue' export default new Vue(); ...
Vue组件通信之bus详解
kirinlau的专栏
11-28 3384
vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 3070
Vue2 bus事件总线的原理与使用
Vue-中央事件总线（bus）
qq_56973906的博客
09-09 3950
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。//1.触发x组件的a事件: x.$emit("a事件",参数...)//2.给x组件绑定a事件 x.$on("a事件",监听器函数)
Vue核心特性04，非父子组件通信：事件总线（Bus）的实现与使用场景
码路同行
12-23 1030
本文详细介绍了事件总线(Bus)在前端开发中的应用，重点分析了其在Vue和React框架中的实现方式及使用场景。事件总线基于发布-订阅模式，通过全局事件中心实现非父子组件间的通信，具有轻量灵活的特点。文章首先讲解了原生JavaScript的实现原理，然后分别展示了Vue2/Vue3和React中的具体用法，并对比了不同实现方案。同时指出了事件总线的局限性，如维护困难、内存泄漏风险等，建议在小型项目或临时需求中使用，而复杂状态管理应选用专业状态库。最后强调应根据项目规模合理选择通信方案，平衡开发效率与可维护性
vue Bus的使用
qq_37899792的博客
03-19 4914
场景：有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 组件调用时先引入 组件1 import Bus from './Bus' expor...
vue3如何使用bus（事件总线）
共同学习，共同成长
01-10 3030
在Vue 3中，可以通过创建一个事件总线（event bus）来实现组件之间的通信。要在Vue 3中使用事件总线，主要步骤有：1、创建一个新的Vue实例作为事件总线，2、在组件中引入并使用该事件总线。以下是详细的步骤和示例。
Vue事件总线（EventBus）使用详细介绍
i168wintop的博客
07-08 2万+
Vue事件总线（EventBus）使用详细介绍 前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值