Vue执行$bus数据总线

最新推荐文章于 2024-05-24 15:04:19 发布
最新推荐文章于 2024-05-24 15:04:19 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tiramisu07/article/details/106566375
版权

1.在main.js为Vue挂载实例对象

Vue.prototype.$bus = new Vue()

2.在需要传递事件的地方写入$emit

      this.$bus.$emit("initOpenDataComplate", enable);

3.在需要监听的地方写入

 this.$bus.$on('initOpenDataComplate',enable)
Tiramisu07
关注
vue组件数据通信--Bus事件总线
u012710123的博客
09-15 278
1、新建bus.js文件，引入vue，创建一个vue实例，导出这个实例： importVuefrom'vue'; exportdefaultnewVue; 2、在需要通信的两个组件中分别引入bus.js import Bus from '路径'; 3、在发送数据的组件中，通过vue实例方法$emit发送事件名称和传递数据。 4、接受数据的组件中，通过vue实例方法$on监听到事件和数据。通常挂载到生命周期create和mounted中： 测试： 测试前： ...
事件总线：vue中$bus的使用和涉及到的问题(兄弟组件之间传值)
bigdargon的博客
12-12 766
$bus传值
Vue组件间数据传输---全局事件总线
anxiangzsq的博客
08-18 232
1、首先是写让所有组件（vc）都可见的X，所有的vc都是VueComponent所new出来的，复习之前的（单文件组件）知道每个组件都是新的VueComponent，所以说不可以，记住之前的原型图，应该直接写在Vue原型对象上，他是唯一的，且vc和vm都能够访问它。然后是考虑调用$on,$off,$emit的问题，X就是普通Object类型的对象，身上是没有$.....的方法的，然后直接x.$on因为x没有，就找到x的Object原型，仍然没有，所以说不能直接将X定义为对象。订阅和发布的消息名保持一致。
Vue 事件总线进行数据通讯
最新发布
u010373106的博客
05-24 238
1、在main.js里加上2、
Vue-你不知道的Bus中央数据总线学习
chendong0008的博客
04-13 529
最近两天在面试中被提及到vue组件通信的几种方式，这些都是巴拉巴拉的一堆网上可以百度到的通信方式，比如父子组件间的props和$emit，以及$refs，$children,$parent, 依赖注入,vuex，以及bus事件总线机制，因为提到了这个bus，所以面试官就问你知道bus的实现原理吗？在我之前的想法中我认为就是通信方式除了vuex需要去掌握一下原理外，其他的都是知道怎么用就好了，但是当面试官突然这么一问之后，我也突然一蒙蔽了，毕竟自己确实不知道。 基于上述原因，我现在慢慢的觉得程序的...
Vue全局数据总线代码模版加解析，贼详细
ChuanyangChen的博客
05-16 353
Vue全局数据总线代码模版加解析 前言 首先，全局总线并不难，理解起来也不算很乱，但需要有下面几个前置知识： 🔗 Vue组件自定义事件 上面的链接，如果你有点基础可以看这篇文章回顾下，如果没有基础推荐你去找更好的文章 知道自定义事件绑在谁身上，就去找谁触发 如果你知道消息订阅与发布（PubSub），这篇文章会更好理解 正文 本文的代码模版实现了如下图所示的数据传递例子： 说明：这个例子即使不使用全局数据总线，也是可以实现的。使用全局数据总线带来的优点是，有一个「工具人$bus」可以给我们做传播媒介，无
浅谈vue中$bus的使用和涉及到的问题
10-15
Vue.js中的$bus，也被称作事件总线或中央事件总线，是一个能够帮助开发者在组件间进行通信的工具，尤其在非父子关系的组件间通信时显得尤为重要。$bus利用了Vue实例的原型属性，让所有组件都可以访问到它，进而实现...
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
总之，解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5061
【Vue 3】中全局事件总线 $bus 的使用
Vue中$bus的用法及$on、$off的使用
AAA的博客
11-27 6740
Vue中 $bus一般与 $on、 $off连用，一般用在任意组件间的通讯，所以今天就一起说，这里给大家举一个案例 首先在main.js中配置全局总线 //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App), beforeCrea
6.Vue组件之间数据通信之 Bus总线
扛麻袋的少年的博客
04-10 2210
基础组件之间传值，可以查看博主文章：1.Vue组件之间传值问题 如果在项目中，组件与组件之间，并不是通过Vue.component('component-a',{...})这么简单来编写的。所以在使用父子间，兄弟间传值问题上，如何使用Bus总线来传值呢？ 项目中使用的组件是如下图所示样式 而不是下图这种的最基础写法。下图基础写法只用于初期学习 ...
VUE总线使用步骤
国家一级程序员
04-09 749
vue使用总线监听
Vue组件之间数据通信之 Bus事件总线
AdleyTales的技术博客
12-03 5442
利用new 一个新的vue实例，可以轻松实现组件之间数据通信。 方法1 新创建一个Bus的js模块 // Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus // 组件Com1 import Bus from './Bus' export default { data() { ...
vue 消息总线
stone_ui的博客
09-15 198
vuebus.js // 定义bus插件，用户数据传递 const install = function(Vue) { const Bus = new Vue({ methods: { emit(event, ...args) { this.$emit(event, ...args) }, on(event, callback) { this..
Vue简单实例——全局事件总线
hssjsh的博客
10-21 811
简单介绍全局事件总线的使用方法和基本实现原理，以及一个简单的全局事件总线的应用案例
从入门到项目实战 - VUE组件跨通信：vue2 与 vue3 中实现全局事件总线
jclee95的个人博客
10-15 1603
Vue全局事件总线原理与实现。
8种vue组件通信方式详细解析实例
weixin_33946020的博客
04-10 127
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 通过bus实现组件间传值
m0_65274248的博客
08-31 309
vue 通过bus实现组件间传值
计算机组成原理——总线（Bus）
m0_66881249的博客
01-04 6846
计算机组成原理总线的相关知识
Vue3如何使用事件总线$bus
06-01
在Vue3中使用事件总线$bus，可以通过创建一个Vue实例，并将其导出作为事件总线使用。具体步骤如下： 1. 在一个新的js文件中创建一个Vue实例，例如： ``` import { createApp } from 'vue'; const app = create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值