Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里。
在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是:
因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。
官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。
vue官方文档中有这样一个定义:非父子组件的通信,内容很少,如下:
其实关于这个非父子组件通信的demo还是有的,它藏在了$dispatch 和 $broadcast的迁移文档中,有兴趣的小伙伴可以点击进去查看。文档中的建议就是:
对于$dispatch 和 $broadcast最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。
这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:
app.js
var eventBus = {install(Vue,options) {Vue.prototype.$bus = vue}
};
Vue.use(eventBus);
复制代码
然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:
分发事件的组件
// ...
methods: {todo: function () {this.$bus.$emit('todoSth', params); //params是传递的参数//...}
}
复制代码
监听的组件
// ...
created() {this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作//todo something})
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {this.$bus.$off('todoSth');
},
复制代码
如果需要监听多个组件,只需要更改 bus 的 eventName:
// ...
created() {this.$bus.$on('firstTodo', this.firstTodo);this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {this.$bus.$off('firstTodo', this.firstTodo);this.$bus.$off('secondTodo', this.secondTodo);
},
复制代码
如果文章有错误或是有什么疑问,欢迎在评论中交流。
Vue 组件通信之 Bus相关推荐
- Vue组件通信之bus详解
作为一名frontend coder, vue也用了有年头了,最近看到相关内容时想着总结一些知识记录下来,vue最主要的两大特性就是响应式和组件化,组件化项目少不了组件之间的通讯,那么组件之间到底有几 ...
- 【Vue】Vue全家桶(三)Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则 不要在子组件中直接修改父组件的状态数据 数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
- vue组件通信(传值)
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法 组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- vue组件通信v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: 1 <tem ...
最新文章
- 巴士云_“相见不如在线”巴士五公司“云面试”汽修工和驾驶员
- 计算机发现概述教案,计算机网络概述教案
- html怎么自动设为底部,让底部永远在页面最底部显示的css方法
- POJ 2240 ZOJ 1082 Arbitrage 最短路,c++ stl pass g++ tle 难度:0
- webserver之日志系统
- Datalist Repeater分页
- USB HID学习:MFC检测USB拔插事件
- java.sql.SQLException: null,message server: Host ora-rac2 is blocked because of many
- 让 “微软雅黑” 在IE6下完美显示
- python与c语言数据交互,python与c语言交互---学习012
- 服务器网赚项目,草根站长的一个网赚项目的分析和总结
- 怎么接微信公众号人工服务器,怎么设置微信公众号接入人工客服?
- 如何让html 兼容IE和chrome,chrome兼容模式如何切换成IE兼容模式_chrome兼容模式切换成IE兼容模式的方法-系统城...
- 漏洞修复:TLS 1.0 enabled
- 提升方法AdaBoost你真的懂吗
- html验证座机号码_JS校验手机号 座机 邮箱 微信号
- 计算机应用程序没声音,电脑没声音怎么办
- LWIP源码分析——ip4.c
- 安卓手机连接不上电脑的解决方法 adb devices 找不到设备
- UDAL - DBProxy internal error问题解决
热门文章
- python 整数 拆分 分段
- 环境变量、用户变量、系统变量
- 【论文写作分析】之三《基于预训练语言模型的案件要素识别方法》
- 网络模型--Densely Connected Convolutional Networks
- 图片格式转换(PNG or JPEG to EPS or PDF)
- 确定神经网络层数以及神经元个数
- 操作系统是计算机软件的核心 它直接监管,华工 网络 操作系统课后作业
- plsql 设置鼠标行执行_Excel中执行“宏”的方法有哪些?我列举了这5个,你会几个...
- php上传图片k,PHP fastcgi模式上传大文件(大约有300多K)报错,
- 对象拷贝 Apache BeanUtils与Spring BeanUtils性能比较