vue-bus全局事件中心简单Demo
1.vue-cli搭建好项目之后,使用npm安装vue-bus
npm install vue-bus
2.在入口文件main.js中全局注册
import Vue from 'vue';
import VueBus from 'vue-bus';
3 Vue.use(VueBus);
3.传递数据:
this.$bus.emit("eventName",data)
4.接收数据:
this.$bus.on("eventName",data)
5.注意事项
this的作用域要指向当前的vm实例,on监听事件一般放在组件生命周期函数中的created或者mounted中,注销bus需要在beforeDestroy中;
关于bus事件触发多次的问题,一方面可能因为vue组件被复用,导致一个bus事件被重复注册,破坏了“同事件名”bus,发送与接收唯一对应的关系;
另一方面是页面路由的时候,原有页面中的bus事件并没有被注销,依然隐藏在程序中。
vue-bus全局事件中心简单Demo的更多相关文章
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
- Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
- Vue学习之--------全局事件总线(2022/8/22)
文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...
- vue组件中—bus总线事件回调函数多次执行的问题
在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题
前端vue项目中,各个组件(非父子关系也可)之间可以通过Bus进行事件通信. main.js中: import Vue from 'vue' const Bus = new Vue(); const ...
- 【Azure 事件中心】在Service Bus Explorer工具种查看到EventHub数据在分区中的各种属性问题
问题描述 通过Service Bus Explorer工具,查看到Event Hub的属性值,从而产生的问题及讨论: Size in Bytes: 这个是表示当前分区可以存储的最大字节数吗? La ...
- vue bus 的使用
简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...
随机推荐
- 1、selenium 8大元素定位方式
元素定位方式: id name css class_name tag_name partial_link link_text : driver. find_element_by_link_text(& ...
- 【原理】scan
SCAN 命令的保证(guarantees) 同一个元素可能会被返回多次. 处理重复元素的工作交由应用程序负责, 比如说, 可以考虑将迭代返回的元素仅仅用于可以安全地重复执行多次的操作上. 如果一个元 ...
- python--前端之CSS
CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了C ...
- MD5、SHA1、DES加密和解密,Base64编码解码
/// <summary> /// EncryptHelper 来自 www.Admin10000.com /// </summary> public class Encryp ...
- SQL注入系列:SQLi Labs
前言 关于注释 说明:在SQL中--[空格]表示注释,但是在URL中--空格在发送请求的时候会把最后的空格去掉,所以用--+代替,因为+在被URL编码后会变成空格 MYSQL有三种常用注释: --[空 ...
- Extjs6 项目构建
一 学习前的了解: 1.Extjs6其实是结合了两个框架:Extjs 和Sencha Touch; 2.Extjs6有两个工具包: classic (存放原来Extjs的可视化组件)和 modern ...
- (转)MyEclipse中使用git
转:https://www.jianshu.com/p/92ee5c99d3a8 Myeclipse老版本可能需要安装一个插件,高版本中已经安装好了. 连接github 当然我们之前已经有仓库了,我们 ...
- 移动无线测试技能图谱skill-map
# 移动无线测试技能图谱 ## 常用IDE- Android * ADT * Android Studio- iOS * Xcode- Common * Atom * Sublime Text * V ...
- 浅析DirectX11技术带给图形业界的改变(一) 浅析DirectX11技术带给图形业界的改变【转】
浅析DirectX11技术带给图形业界的改变(一) 浅析DirectX11技术带给图形业界的改变 前言:2009年10月23日,微软高调发布了其最新一代操作系统——Windows7,这款操作系统相对于 ...
- jackson反序列化报错Unrecognized field , not marked as ignorable
使用Jackson提供的json注解. @JsonIgnore注解用来忽略某些字段,可以用在Field或者Getter方法上,用在Setter方法时,和Filed效果一样.这个注解只能用在POJO存在 ...