Vue兄弟组件间利用bus传值

最新推荐文章于 2023-09-02 09:27:34 发布
最新推荐文章于 2023-09-02 09:27:34 发布
阅读量662 收藏
点赞数 1
分类专栏： Vue

1、在main.js中new一个Vue对象，并挂载到Vue原型上面，即$bus
在这里插入图片描述

2、在需要传值的地方，利用this. b u s . bus. bus.emit()方法发送需要传递的值，第一个参数就是一个唯一标识（key），第二个参数就是要传递的数据（不限类型）（value）
在这里插入图片描述

3、在接收数据的组件中，在mounted中编写接收方法，即使用this. b u s . bus. bus.on方法。第一个参数就是唯一标识（key）需要和发送数据的地方的key一样，第二个参数就是一个回调函数，res就是传递过来的值，通过res就能拿到你需要的数据
在这里插入图片描述

VUE兄弟组件传值操作实例分析
10-16
为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。 首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...
兄弟组件间的传值 - $bus
bubbleSweet的博客
06-14 3898
兄弟组件间的传值 - $bus 兄弟组件之间的传值方式有很多，例如很方便的 vuex，或者通过传父组件再传兄弟组件，这里介绍 vue 中的 $bus 的使用方法 首先在 main.js 中创建一个新 vue 实列 import Vue from 'vue' import App from './App' import router from './router' import Vant from 'vant'; import 'vant/lib/index.css'; Vue.prototype.$
Vue第 25 篇，Vue2兄弟组件传值，Vue2兄弟组件通讯的两种方式，详细过程（Vue2同级别组件传值通讯，Vue2兄弟组件通讯传值常用）
weixin_65793170的博客
01-02 7350
⭐在 Vue.JS 中，兄弟组件之间的通信由于缺乏直接的父子关系而变得相对复杂。然而，Vue提供了多种机制来实现这种同级组件间的有效数据共享与通信。Vue2常见的方法包括使用事件总线（Event Bus）或 Vuex 状态管理库，这些方案能够帮助我们轻松地在没有直接关联的组件之间传递信息和状态，确保应用逻辑的一致性和可维护性。兄弟组件，就是同级别的组件。
兄弟组件之间的传值（bus、vuex、根对象）三种方法详解
浮游的博客
06-18 1449
有时候两个组件也需要通信（非父子关系），当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 方法一：用eventBus <div id="app"> <c1></c1> <c2></c2> </div> var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js Vue.component('c1',
vue bus传值
weixin_46003800的博客
11-03 1008
简述 : 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组件传值：非父子传值 $bus（总线）
dreamy_wx的博客
05-09 1052
比如将A页面中的事件传到B页面 需求： 管理后台右上角用户信息 当B页面点击时需弹出确认框并请求接口判断；其他页面点击则直接跳转 //A页面 navBar.vue <el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-item @click.native="jumpPage"> 任务明细 </el-dropdown-item> <el-dro
vue组件间的传值-小案例
07-06
以上就是Vue组件间通信的基本方式。理解并熟练运用这些技巧，能够帮助开发者更好地组织和管理复杂的Vue应用。在实际项目中，还可能涉及更复杂的通信场景，如使用Vuex状态管理库，或者通过事件总线（Event Bus）进行...
vue非父子组件间的传值
01-08
总结来说，Vue.js中的非父子组件间通信主要依赖于事件总线（Event Bus）机制，通过触发和监听自定义事件实现数据的传递。这种机制简单灵活，但当应用变得复杂时，可能需要引入Vuex等更强大的状态管理工具来更好地...
vue 组件间的通信之子组件向父组件传值的方式
11-20
对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。 ```javascript // eventBus.js import Vue from 'vue' export const EventBus = new Vue() ```...
Vue.js中兄弟组件之间互相传值实例
10-19
本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central Event Bus），也被称为中转站，来实现兄弟组件间的通信。 首先，需要了解的是，在Vue.js中，组件通过声明式的嵌套来构建...
组件传值方法--$bus的使用
@热血与梦想的博客
04-18 1272
不管组件之间是什么关系，都可以去使用。这个文件相当于一个中转站，使用$bus去传值非常方便。如果用props去父子传值，组件不刷新值也不会刷新，用$bus可以实时刷新组件内的值。 1.$bus文件的创建--bus.js import Vue from 'vue' export default new Vue() 2.$bus文件的引入 import Bus from '@/..' 3.$bus的使用 this.$Bus.$emit() //相当于上车 this.$Bus.$on() //相
事件总线：vue中$bus的使用和涉及到的问题(兄弟组件之间传值)
bigdargon的博客
12-12 794
$bus传值
Vue之全局事件总线$bus
RR_chen的博客
04-17 1497
全局事件总线：可以实现任意组件间通信 关于VueComponent： school组件 本质是一个名为 VueComponent 的构造函数， 且不是程序员定义的，是 Vue.extend 生成的，即 Vue.extend({ })的返回值。 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options )。 特别注意：每次调用 Vue.extend 返回的都是一个全新的 VueComponent。 关于this指向： (1)
简单使用 vue事件总线$bus
Bigfishseasugar
07-06 740
我们常常遇到组件之间需要通信的情况。有父子关系的组件，可以通过 props 和 $emit 等通信；但当两个组件间关系很“疏远”时，如果还顺着两者之间隔着的组件一个一个地传递信息就显得特别麻烦了，所以可以考虑 vuex 或 事件总线$bus 等这一类“全局”解决方法。 通过使用$bus，可以让A组件发出某一事件，然后在B组件中监听该事件，并执行一些代码（函数）。具体用法如下： 先要在 main.js 中给 Vue原型 添加$bus属性，并赋值一个新的Vue实例。 Vue.prototype.$b.
$bus的使用
qq_42816270的博客
01-10 1853
事件总线：$bus的使用，$bus.on 监听，$bus.off关闭监听，$emit 发送事件，$bus 封装
Vue 组件传值 --- $bus 全局事件总线
weixin_52065173的博客
10-16 405
Vue 组件传值 --- $bus 全局事件总线
Vue中bus传值的理解
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
01-05 6019
  说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。 简单描述   在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。 使用方式   在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：   1）建立bus.js文件   在文件夹下建立bus.js文件，写入以下代码： // bus.js imp...
Vue 兄弟组件之间传值 Bus方法
m0_61044611的博客
06-13 1816
Vue 兄弟组件之间传值 Bus方法
【4.Vue兄弟组件之间传值-Bus总线】
最新发布
qq_27860623的博客
09-02 267
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。
Vue 2.0组件间多方式传值与通信详解
在Vue 2.0中，组件之间的通信和传值是实现模块化和复用的关键。本文将详细介绍四种主要的方法来实现这一目标： 1. **路由参数传递**: - 通过`$router.push()`方法，A组件可以将数据（如`orderId`）作为查询字符串...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值