Vue中使用vue-bus

最新推荐文章于 2023-12-29 16:50:14 发布
最新推荐文章于 2023-12-29 16:50:14 发布
阅读量346 收藏
点赞数
分类专栏： Vue2 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/125317924
版权
本文详细介绍了如何在 Vue.js 应用中使用 VueBus 进行组件间通信。首先，通过 `cnpmi` 安装 `vue-bus`，然后在全局引入并初始化 VueBus。接着，在需要通信的组件中，使用 `VueBus` 的 `$emit` 发送事件和 `$on` 监听事件来实现数据传递。
摘要由CSDN通过智能技术生成

下载：

cnpm i -S vue-bus

引入：

import VueBus from 'vue-bus';
Vue.use(VueBus);
window.VueBus = new Vue().$bus;

使用：

疆~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli 使用vue-bus来全局控制的实例讲解
12-29
讲真，我写标题的时候不知道怎么写的好，之前写过一篇关于vue-bus的，不过是基础版本的，今天讲的是用脚手架来搭建的环境下的使用 与使用路由相似，我们需要先倒入这个vue-bus 指令如下： npm install vue-bus 导入成功后，我们就要去使用它，（还是参考路由） 我们在代码中写下： <code class=language-html>import bus from vue-bus Vue.use(bus); </code> 是的，这跟路由很想，这点无需怀疑，接着我们可以参考下我上回的那个模板。依旧是三部曲，现在我们已经完成了部署环境这一步，接着是要去提交（emi
vue Bus使用
m0_59314971的博客
03-24 228
2、在要传值的组件页面中用$emit，在要拿到值的兄弟组件页面中用$on。在main.js中使用beforeCreate方式引入bus。创建一个Bus目录，在目录内创建一个Bus.vue公共文件。1、$on和$emit第一个参数一定得是一样的。3、最后在beforeDestroy中销毁。创建第一个兄弟组件DemoOne.vue。创建第二个兄弟组件DemoTwo.vue。首先，bus可以用在任何组件之间的传值。vue中关于兄弟组件bus的使用方法。注：本文只讲解全局引入方法。引入完成后就可以创建文件了。
vue 页面传值_哇操，vue-bus
weixin_39999222的博客
12-12 136
前言.父子组件之间的通信vue提供了更直接的方式，此处不细说，不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的传值以及相关的逻辑处理。因此就有了vue-bus和vuex.vue-bus可用于不是特别复杂的项目中任意组件的传值问题。vuex不仅能实现组件之间通信的问题还提供了相应的逻辑处理方法。但是也更为庞大，所以一般简单的传值问题可用于vue-bus解决1.vue-bu官网地...
vue 组件通信及vue-bus
weixin_42201272的博客
04-11 156
vue 1.父向子传值 <body> <div id="app"> <menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='arr'></menu-item> </div> <script src="./js/vue.js">&lt...
vue2.0 中央控制总线 Bus
weixin_45563734的博客
11-28 624
vue2.0 中央控制总线 Bus
vue 使用高德地图vue-amap组件过程解析
10-16
在本文中，我们将深入探讨如何在Vue项目中集成并使用高德地图的`vue-amap`组件。`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行...
浅谈vue中$bus的使用和涉及到的问题
10-15
注册了$bus之后，我们就可以在组件中使用`this.$bus`来实现事件的监听和触发。比如，在组件A中触发一个事件，并在组件B中监听这个事件： ```javascript // 组件A this.$bus.$emit('some-event', 'some data'); // ...
vue-bus-适用于Vue.js的微型简单中央事件总线插件2。-Vue.js开发
05-27
vue-bus一个很小的简单的中央事件...（655字节gzip）安装下载并与构建系统一起使用，从'vue-bus'//导入VueBus // ...也许... var VueBus = require（'vue-bus'）// ...和... Vue.use（VueBus）或仅将其包含在脚本标签中
vue2 全局事件总线（$bus）使用
最新发布
glacierW的博客
12-29 825
绑在bus上的都要主动销毁，因为App.vue销毁之后，bus还在，在上面注册的时间都还在占空间，所以需要进行销毁beforeDestroy和mounted同级。
vue中使用Bus
weixin_30776545的博客
08-17 580
//安装：npminstall vue-bus1. // app.js var eventBus = { install(Vue,options) { Vue.prototype.$bus = new Vue() } }; Vue.use(eventBus); 2.然后在组件中，可以使用$emit， $on， $o...
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 1821
Vue2 bus事件总线的原理与使用
Vue bus
Koini
07-09 418
bus主要实现组件之间的通信，较于组件之间的子传父，父再传另一子组件方便了很多 首先创建一个bus.js import Vue from 'vue' const bus = new Vue() export default bus 父页面 <template> <div class="demo-wrapper"> <comA /> <comB /> </div> </template> <script&
vue组件之间的通信 vue-bus和vuex
热门推荐
lyc2786161648的博客
03-15 1万+
前言.父子组件之间的通信vue提供了更直接的方式，此处不细说，不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的传值以及相关的逻辑处理。因此就有了vue-bus和vuex.vue-bus可用于不是特别复杂的项目中任意组件的传值问题。vuex不仅能实现组件之间通信的问题还提供了相应的逻辑处理方法。但是也更为庞大，所以一般简单的传值问题可用于vue-bus解决 1.vue-bu官网...
插件vue-bus的使用（笔记）
qq_38702877的博客
08-30 512
安装 npm install vue-bus 引入 import bus from “vue-bus” Vue.use(bus); 发送： this.$bus.emit(‘key’,参数) 接收： this.$bus.on(‘key’,msg=>{})
VUE组件通信bus
w_t_y_y的博客
05-19 264
一、语法： 用于组件通信，这两个组件可以是父子关系、兄弟关系，也可以没有任何关系。bus使用$emit， $on， $off 分别来分发、监听、取消监听事件。 使用方法： 1、引入：在main.js中加上： import VueBus from 'vue-bus'; Vue.use(VueBus); 2、分发事件的组件 // ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //para
Vue使用vue-bus进行组件间通信
这就是快乐嘛
04-23 364
首先在main.js中将vue-bus注册 import VueBus from 'vue-bus' Vue.use(VueBus) 如果提示没有vue-bus，则执行安装命令： npm install vue-bus --save 监听事件： 通过this.$bus.on('自定义事件名称',事件函数) 举例 mounted: function () { this.$bus.on('自...
【vue】bus跨组件通信
qq_44742261的博客
06-30 176
下载 yarn add vue-bus -S 引入 main.js中 import VueBus from 'vue-bus' Vue.use(VueBus) 使用 3.1 在需要通知的位置，发送一次bus通知 this.$bus.emit('自定义通知名', 参数) 3.2 在需要接收的位置，监听对应通知（必须在页面初始化时监听） created(){ this.$bus.on('自定义通知名',（data） => { data就是传递过来的参数 ..
vue bus的整合
wuqing2012mxd的博客
03-30 265
关于vue的bus网上有很多文章,但是都或多或少有点问题,这边整合了一下,整理出了我想要的版本: 起因:vue route跳转的时候使用公交事件的话,老是会存在,时间差问题导致,组件A的事件已经发送,但是组件B却还没有开始监听,要么就是因为注册后,没有取消监听,导致多次触发事件, 看了一些文章受到了一下2个文章的启发,总结了解决方案 https://www.jianshu.com/p/fde85549e3b0 https://segmentfault.com/a/1190000016992424#
如何在vue中使用bus
05-25
Vue中的`bus`可以用来在组件之间进行通信，具体实现如下： 1. 创建一个Vue实例作为`bus`，并将其导出 ```javascript import Vue from 'vue' export const bus = new Vue() ``` 2. 在需要通信的组件中引入`bus...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值