vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。
用法如下:
第一步:项目中创建一个js文件(我通常给它取个名字为bus.js),引入vue,创建一个vue实例,导出这个实例,代码如下(一共就两行):
import Vue from 'Vue'
export default new Vue
Bus.$on('click',target => {
console.log(target) // 注意:发送和监听的事件名称必须一致,target就是获取的数据,可以不写target。只要你喜欢叫什么都可以(当然了,这一定要符合形参变量的命名规范)
})
beforeDestroy(){
bus.$off('click')
}
总结一下,这里只是介绍如何使用eventBus来解决非父子组件通信,但是当项目较大较复杂时,并不适合。到那时,vuex才是vue给我们提供的最理想的方式。
注意:以上存粹是个人的理解,有不同观点或者其他建议的欢迎交流学习!
vue中央事件总线eventBus的简单理解和使用的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- EventBus 事件总线之我的理解
用例:假设公司发布了一个公告 需要通过短信 和 邮件分别2种方式 通知员工 1:首先我们建立领域模型 /// <summary> /// 领域核心基类 /// </summary&g ...
- 自己动手写事件总线(EventBus)
本文由云+社区发表 事件总线核心逻辑的实现. EventBus的作用 Android中存在各种通信场景,如Activity之间的跳转,Activity与Fragment以及其他组件之间的交互,以及在某 ...
- C# 事件总线 EventBus
1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需 ...
随机推荐
- Docker使用Mysql镜像命令
本次使用的环境是win10下的hyper-v安装的CentOS7系统 控制台输入命令: docker run -p 3307:3306 --name mysql01 -v $PWD/conf:/etc ...
- James Munkres Topology: Sec 22 Example 1
Example 1 Let \(X\) be the subspace \([0,1]\cup[2,3]\) of \(\mathbb{R}\), and let \(Y\) be the subsp ...
- hdfs api
经常用到,做个眼 如果是单机版 centos(参照给力星 Hadoop配置),要在 core-site.xml 里面配置 ip:9000 别 localhost:9000 windows ...
- python第七天(字符编码,字符与字节,文件操作)
一.字符编码: 定义:将人识别的字符转换成计算机能识别的0和1,转换的规则就是字符编码表. 常见编码表:ascii.unicode.GBK 编码表: 1.采用的都是unicode编码表 2.unico ...
- DS博客作业01—日期抽象数据类型设计与实现
1.本章学习总结 1.1 思维导图 1.2学习体会 开学就来了个大作业,还要求用的是c++语法,作为一个只听过没学过的未知语法,靠着CSDN和寝室大佬的帮助下渐渐地了解了一些c++的使用,现在也可以使 ...
- 数组实现int随机数的阶乘(避免大数问题)
面试的一道题目,实现int随机数的阶乘.这道题就是考察你考没考虑大数问题,如何避免它. 我能想到的就是用数组去实现,然后写了一下代码.但是当i的值很大,接近Max_value时的情况还没有考虑到. 直 ...
- ELK:logstash和filebeat6.0及以上版本的配置
filebeat6.0版本以上没有document_type字段,因此需要另外标记下或者代替document_type字段的功能 案例如下: fielbeat5.5的配置 logstash5.5的配置 ...
- SQL Server 优化
SELECT TOP 10 [Total Cost] = ROUND(avg_total_user_cost * avg_user_impact * (user_seeks + user_scans) ...
- git diff old mode 100644 new mode 100755
今天执行git diff filename ,出现 old mode 100644 new mode 100755 的提示,如下图: 但是发现文件内容并没有发生改变 想起来中间执行过chmod 的操 ...
- [BZOJ1925][SDOI2010]地精部落(DP)
题意 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi,其中Hi是1到N ...