vue组件传值之bus（多用于兄弟组件传值）

最新推荐文章于 2024-07-27 10:14:55 发布
最新推荐文章于 2024-07-27 10:14:55 发布
阅读量3k 收藏 13
点赞数 2
分类专栏： vue 文章标签： vue之bus 组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bamboozjy/article/details/90693066
版权

父子组件之间传值有各自的方法,此方法可用于兄弟组件或祖孙组件传值

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.$bus.$on("sendData",d=>{console.log(d)})

 

竹子js
关注
专栏目录
兄弟组件之间怎么使用bus传值
weixin_46414427的博客
05-26 242
1.首先在main.js注册bus // bus const bus = new Vue() Vue.prototype.$bus = bus window.$bus = bus 2.使用$emit传递值 this.$bus.$emit('approve', true) 3.使用$on接收(接收的时候尽量在mounted里面接收,不然有可能会出问题) mounted() { this.$bus.$on('approve', (msg) => { this.approve =
vue传值之父子组件传值、bus传值、vuex传值…
2401_84153285的博客
04-20 896
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-LqY5Y2Ts-1713572716293)][外链图片转存中…(img-bl5w3G7K-1713572716293)]
bus的两用方法及用法（兄弟传值）
weixin_50085094的博客
07-07 299
bus比较适合小项目 vuex就不太适用了。bus其实就是利用vue的自定义事件机制，在触发地 方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。vue中非父子组件之间通信除了用vuex，也可以通过bus总线，两者适用场景不同。2）第二种方法 ：新建bus.js文件 ,一般放在utils中。vuex适用中大型项目、数据在多组件之间公用的情况。（1）第一种方法: 在main.js里创建 挂载原型。2.如何创建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通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间
最新发布
07-27 396
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间。虽然Vue推荐使用provide和inject或者Vuex进行组件通信，但在某些简单场景下，使用事件总线也是一种可行的解决方案。
Vue兄弟组件传值 ------ bus 中央事件总线
prayer的博客
06-06 6495
之前了解到了父组件传值给子组件（props），子组件传值给父组件($emit),对于兄弟组件间传值是通过他们的父组件作为介质传送的，相当麻烦，现在用bus（一个空的vue对象）作为介质传值更加方便。第一步：在assert文件夹下创建一个eventBus.js文件第二步：在components文件夹下创建一个文件，用来传递数据（触发自定义函数）第三步：在components文件夹下创建一个文件，用来...
vue bus传值
weixin_46003800的博客
11-03 986
简述 : 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(vueBus公共交通)
sunshineTing2的博客
02-20 2657
第一步：创建 vueBus.js文件（在utils目录下） // vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; 第二步：在main.js中引入vueBus // main.js import vueBus from '@/utils/vueBus'; Vue.use(vueBus); 第三步：在.v
VUE使用Bus传值
xiaoHelloWord的博客
07-13 949
首先建个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兄弟组件传值操作实例分析
10-16
为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。 首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...
html中js向vue组件传值,Vue 组件之间传值
weixin_26850469的博客
06-18 1110
#同一个路由下，父向子组件传值props属性 -- 单向绑定import childOne from '../components/childOne.vue';export default{data() {return{msg: '我是动态data中的数据！'}},components: {childOne}} {{ info }} {{ msg }} export default{props:...
详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 组件间的通信之子组件向父组件传值的方式
11-20
Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 应用中，组件间的通信是非常常见且重要的。本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。 首先，我们要理解 Vue 中的...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
Vue Bus 传值
CodingmanNAN的博客
04-25 271
创建一个bus类负责事件派发、监听和回调管理
Vue 兄弟组件之间传值 Bus方法
i_am_a_div的博客
10-19 634
Vue 兄弟组件之间传值 Bus方法
Vue兄弟组件间利用bus传值
dongwei666的博客
05-16 645
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使用
weixin_52941842的博客
09-01 274
vue兄弟组件传值，vue全局事件总线$bus使用
Vue中bus传值的理解
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
01-05 5995
  说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。 简单描述   在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。 使用方式   在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：   1）建立bus.js文件   在文件夹下建立bus.js文件，写入以下代码： // bus.js imp...
Vue组件传值深度解析：父子与非父子通信
"Vue组件传值的详细解析" 在前端开发中，Vue.js是一个非常流行的JavaScript框架，尤其在构建用户界面时。Vue组件是其核心特性之一，它们允许开发者将应用拆分成可重用的部分。组件间的通信是任何应用程序的重要组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值