vue中组件间 的传值 bus(vueBus公共交通)

最新推荐文章于 2025-10-06 05:52:17 发布
原创 最新推荐文章于 2025-10-06 05:52:17 发布 · 3k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vueBus

本文介绍了在Vue中如何通过创建vueBus.js文件并集成到main.js来实现在不同组件间的数据传递。在B页面，可以通过$emit触发事件并传递值，而A页面则在mounted阶段用$on监听事件并在destroyed时用$off销毁监听。这种方法为不同层级和无关联组件间的通信提供了解决方案。

前言：vue中组件间 的传值 bus(vueBus公共交通)

在vue中，有父子组件，兄弟组件，爷孙组件，毫无关系组件等
页面之间需要传递数据（也可以使用Vuex）或触发方法，那么这时就希望有个公共的东西来及时通知，Bus 就可以很好地解决这个问题！

第一步：创建 vueBus.js文件（在utils目录下）
// vueBus.js
import Bus from 'vue';
let install = function (Vue) {
   
   
  Vue.prototype.$bus =
最低0.47元/天 解锁文章
精选资源
vue组件间的传值-小案例
07-06
以上就是Vue组件间通信的基本方式。理解并熟练运用这些技巧，能够帮助开发者更好地组织和管理复杂的Vue应用。在实际项目中，还可能涉及更复杂的通信场景，如使用Vuex状态管理库，或者通过事件总线（Event Bus）进行...
精选资源
Vue非父子组件之间传值
01-08
由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）来解决这个问题。...
Vue组件传值之bus总线
01-08
引言 在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 方法一： 在组件一中引入 import Bus from './Bus' export default { data() { return { ......
vue bus传值
weixin_46003800的博客
11-03 1061
简述 : bus传值是两个组件之间的传值,适用兄弟组件之间的传值 1.utils中创建bus.js文件 import Vue from 'vue' const Bus = new Vue() export default Bus 2.在需要传值的组件中添加代码 A.vue页面 // 兄弟组件中的传值 import Bus from './utils/bus..js' // 在适当的时机通过this.$emit进行传参 methods:{ toBPage(){ Bus.$emit('val',data
Vue 事件总线（EventBus）详解
最新发布
csdn_silent的博客
10-06 1321
事件总线是一个发布-订阅模式的实现，它允许组件之间通过事件进行通信，而不需要直接引用对方。
vue bus组件传值
weixin_30672295的博客
05-21 260
父组件 event(){ this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称，title,item为向子组件传的值 子组件 接收 在mounted this.$bus.on("edit", (title, obj) => { //title，obj为子组件接收的值 }); 子组件向父组件传值 this.$...
VUE使用Bus传值
xiaoHelloWord的博客
07-13 1026
首先建个bus.js文件 JS文件内容如下 import Vue from 'vue' export default new Vue() 然后在我们要传值的页面中引入，对应自己放的位置 import BUS from ‘…/utils/bus.js’ NavChild为传值的名字 BUS.$emit('NavChild',数据内容) 在我们接收的页面在继续引入bus.js import BUS from ‘…/utils/bus.js’ infor就是我们传过来的值 Bus.$on('NavChild'
Vue - 全局组件之间传值（Bus）
技术共享，共同进步！
08-04 979
全局组件之间传值（Bus）
vue 组件间的通信之子组件向父组件传值的方式
11-20
在 Vue 应用中，组件间的通信是非常常见且重要的。本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。 首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
Vue Bus 传值
CodingmanNAN的博客
04-25 359
创建一个bus类负责事件派发、监听和回调管理
详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…
Jet_Lover的博客
05-31 8798
vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结 前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，emit向上传递，兄弟之间用bus。 一、父子组件传值 子组件 <template> <div class="child"> {{ message }} </div> </templa
vue中使用 bus 进行组件之间传值
板砖工KO水泥匠
07-24 423
vue中使用 bus 进行组件之间传值 step 1 、npm安装 npm install vue-bus step 2、引入 // 在 main.js 引入 import VueBus from 'vue-bus'; Vue.use(VueBus); step 3、使用 组件A中 // 传值 this.$bus.emit("eduTest",{title:"hello world"}) 组件B中 // 监测传值 this.$bus.on("eduTest",res=>{ console
Vue中bus传值的理解
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
01-05 6113
  说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。 简单描述   在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。 使用方式   在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：   1）建立bus.js文件   在文件夹下建立bus.js文件，写入以下代码： // bus.js imp...
Vue中bus传值（傻瓜式）
T8682828的博客
10-14 221
Vue中bus传值（傻瓜式）
vue组件传值之bus（多用于兄弟组件传值）
bamboozjy的博客
05-30 3048
1.在main.js中，new一个空的vue挂在到vue原型上： Vue.prototype.$bus = new Vue(); 2.在demo.vue中使用bus发送数据（可以通过点击事件触发） this.$bus.$emit("sendData",{data:"需要发送的数据"}) 3.在另一个test.vue中接收数据（可以写在created生命周期函数中） this.$bu...
Vue兄弟组件间利用bus传值
dongwei666的博客
05-16 716
1、在main.js中new一个Vue对象，并挂载到Vue原型上面，即$bus 2、在需要传值的地方，利用this.bus.bus.bus.emit()方法发送需要传递的值，第一个参数就是一个唯一标识（key），第二个参数就是要传递的数据（不限类型）（value） 3、在接收数据的组件中，在mounted中编写接收方法，即使用this.bus.bus.bus.on方法。第一个参数就是唯一标识（key）需要和发送数据的地方的key一样，第二个参数就是一个回调函数，res就是传递过来的值，通过res就能拿到
vue 事件总线（ vue-bus）非父子组件传值
Super_LD的博客
06-14 6460
vue-bus一个 Vue.js 事件中心插件，同时支持 Vue 1.0 和 2.0原因Vue 2.0 重新梳理了事件系统，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流，但有诸多限制，比如不支持跨多层父子组件通信，也没有解决兄弟组件间的通信问题。Vue 推荐使用一个全局事件中心来分发和管理应用内的所有事件，详见文档。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值