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

最新推荐文章于 2024-05-24 15:04:19 发布
最新推荐文章于 2024-05-24 15:04:19 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50832030/article/details/123509297
版权

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

2、使用事件总线。

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

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

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

 

 

T-腾腾
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 事件总线 兄弟组件之间传值
weixin_43835059的博客
02-12 679
Vue事件总线 evenbus 兄弟组件之间传值 vue传值方式主要有四种 1.路由带参数传值 2.父子组件之间传值，父传子用props，子传父用emit 3.如果是大项目可以使用vuex传值，小项目少页面可以使用evenbus之间进行传值 事件总线之间传值可以分为两种，一种全局事件传值，一种单独设一个js文件进行引用传值 第一种：全局使用，在main.js中用vue的原型对象上添加一个bus...
Vue全局事件总线 （任意组件之间通信）
weixin_55783373的博客
08-11 433
Vue全局事件总线 （任意组件之间通信） 首先在main.js里面 Vue原型链上创建一个属性，把Vue的this赋给他，就能使用vc或者vm身上的属性 把学生的名字传给学校，使用 $emit自定义事件 学校接收学生传过来的数据，使用 $on接收事件 ...
vue兄弟组件传值的五种方法
zhuhaiuser的博客
12-05 5359
Vuex 是Vue的官方状态管理库，它可以将组件的共享状态抽离出来，以一个全局单例模式管理。通过 Vuex，兄弟组件可以直接共享状态，实现数据的传递。方法一:使用父组件作为中介在这种方法中，兄弟组件通过共同的父组件来传值。父组件作为中介，负责接收一个组件的数据，并将其传递给另一个组件。$refs是Vue中一个特殊的属性，可以用来访问组件实例或元素兄弟组件通过$refs来获取其他组件的实例，并直接访问其数据。2兄弟组件分别通过$emit 方法触发自定义事件，并通过$on 方法。方法三:使用事件总线。
VUE 兄弟组件传值
Jana Jing的分享
02-24 6591
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
Vue 事件总线进行数据通讯
最新发布
u010373106的博客
05-24 199
1、在main.js里加上2、
Vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）
weixin_65793170的博客
01-02 5448
简介:兄弟组件，就是同级别的组件⭐
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 组件之间传值
忧郁的蛋的专栏
02-18 1万+
使用 props 和 $emit 可以实现父子组件之间的传值，使用 provide 和 inject 可以实现祖先组件向后代组件的传值，使用 Vuex 和 EventBus 可以实现任意组件之间的传值。假设我们有一个父组件和一个子组件，子组件需要接收父组件的一些属性和事件监听器，同时还需要把这些属性和事件传递给子组件的某个子元素。5、使用全局事件总线：可以使用 Vue 的事件机制，通过在 Vue 实例上使用 $on 来监听事件，然后在其他组件中使用 $emit 触发相应的事件来传递数据。
详解vue-router和vue-cli以及组件之间的传值
08-30
此外，还可以通过非父子组件间的通信工具，如 Vuex（状态管理）或事件总线（EventBus）来实现组件间的通信。 总结，Vue Router 负责页面路由，Vue CLI 提供了快速构建项目的框架，而组件间的通信则是 Vue.js 开发中...
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
vue.js单文件组件中非父子组件的传值实例
10-18
总结来说，Vue.js中的非父子组件通信可以通过创建一个全局的Vue实例（事件总线）来实现。组件之间通过`$emit`发送事件，其他组件通过`$on`监听并处理这些事件。这种方法提供了一种灵活的方式，使得任何组件都可以...
vue2.0组件之间传值、通信的多种方式(干货)
08-28
- 当组件没有直接的父子关系时，可以创建一个全局的Vue实例作为事件总线（event bus）。首先创建一个新的Vue实例，然后在需要发送数据的组件中使用`eventBus.$emit`发送事件，而在接收数据的组件中使用`eventBus.$...
详解vue 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
Vue中兄弟组件间传值
zoukunyang的博客
08-23 2154
Vue中父组件向子组件传递参数时，可以通过prop；子组件向父组件传递参数时，通过$emit来传递。那么父组件下有多个子组件时怎么实现子组件间的数据传递呢？可以创建一个Vue实例作为第三方媒介实现数据的传递。下面是具体的步骤。
vue组件间（父子、兄弟、跨级组件）通信传值
DOM曼珠沙华的博客
05-21 5310
大体可以分为这几种情况： 父子组件传值 子父组件传值 兄弟组件传值（不相干的两个组件） 跨组件传值 父组件给子组件传值 静态传值 父组件内： <form-test title="element表单"></form-test> 子组件使用props获取： props:['title'], 子组件渲染在页面内： <h3>{{title}}</h3> 最后渲染效果： 动态传值 子组件内的东西与上方的一致，修改父组件内的组件： <form-test
vue组件的五种传值方法(父子\兄弟\跨组件)
pckzzy108的博客
08-22 2912
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。// 父组件代码，渲染子组件method:{// 子组件代码。
vue 兄弟组件之间的传值
seimeii的博客
07-29 3911
vue兄弟之间的传值
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8363
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
vue 兄弟之间传值
weixin_46166771的博客
03-28 828
vue 兄弟之间传值
vue组件与组件之间如何传值
09-28
在Vue中，组件之间有多种传值的方式可以选择。以下是一些常见的组件...EventBus是一种事件总线，可以发布和订阅事件来实现组件之间的通信。 在选择组件传值方式时，还需要考虑数据的安全性、可维护性和性能等因素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值