vue兄弟之间传值 全局事件总线 bus

已于 2022-03-14 17:56:09 修改
阅读量779 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-03-14 17:25:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fvf451561/article/details/123483469
版权
本文通过一个实例展示了如何使用Vue的全局事件总线（bus）实现兄弟组件之间的值传递。以role和age两个兄弟组件为例，当在age组件中点击按钮时，会将值传递到role组件。步骤包括：将bus挂载到Vue实例，emit事件，监听事件，以及在组件销毁前使用bus.off解除监听。
摘要由CSDN通过智能技术生成

以兄弟组件传值为例
role age 是两个兄弟组件
实现目标 age组件里只有一个按钮 点击按钮将 值传到那么组件里的role去
在这里插入图片描述

在这里插入图片描述
第一步
将bus挂载到vm上全局可用
在这里插入图片描述
第二步 要传的 兄弟组件中 emit事件

在这里插入图片描述
第三步 接受组件中 监听事件
在这里插入图片描述
第四步
在beforeDestroy里用 b u s

最低0.47元/天 解锁文章
薛定谔呃呃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue用公共组件页面传值_使用全局 bus 在 Vue 的兄弟组件中简单传值（以及 this 重定向的 5 种方法）...
weixin_35851515的博客
12-24 498
总线传值有两种写法：原型bus写法【 window.Vue.prototype.bus = new Vue() 】、全局bus写法【 window.bus=new Vue() 】。如果使用了原型写法，那在组件里面必须使用 this.bus.$emit() 发送消息，以及使用 this.bus.$on() 接收消息。它们全部要用 this 开头。如果使用了全局写法，则可以简化为 bus.$emit(...
vue兄弟组件传值（eventBus）
gzj32817的博客
07-28 324
vue使用eventBus 进行兄弟组件传值
Vue任意组件通信之全局事件总线（GlobalEventBus）
m0_56219678的博客
02-04 791
Vue任意组件通信之全局事件总线
Vue - 全局组件之间传值（Bus）
技术共享，共同进步！
08-04 878
全局组件之间传值（Bus）
Vue全局事件总线（兄弟组件之间传值）
m0_50832030的博客
03-15 1625
1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例) 2、使用事件总线。 一、提供数据的组件：使用$bus的$emit Api去传值给A组件 二、接收数据组件比如：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身，可以在mounted钩子中接受数据 3、最好在接收数据的组件中的beforeDestroy钩子中，用$bus的$off Api去解绑当前
vue兄弟组件传值，vue全局事件总线bus使用
weixin_52941842的博客
09-01 264
vue兄弟组件传值，vue全局事件总线$bus使用
【4.Vue兄弟组件之间传值-Bus总线】
qq_27860623的博客
09-02 236
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。
VUE兄弟组件传值操作实例分析
10-16
为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。 首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 451
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
Vue.js中兄弟组件之间互相传值实例
10-19
本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central Event Bus），也被称为中转站，来实现兄弟组件间的通信。 首先，需要了解的是，在Vue.js中，组件通过声明式的嵌套来构建...
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5026
【Vue 3】中全局事件总线 $bus 的使用
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1542
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 5530
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 1608
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1214
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 455
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
vue+moment转化日期格式为年月日时分秒！最简洁版
demotang的博客
08-30 281
官网：https://momentjs.cn/
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1019
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue3事件总线bus传值
09-06
在Vue 3中，官方取消了全局事件总线的使用，这给组件之间传值带来了一些麻烦。 为了解决这个问题，我们可以使用一个插件叫做mitt。首先，你需要安装并使用mitt插件。然后，在接收传值的组件中，你需要引入bus并监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值