在 vue 的开发中, 经常会在两个组件间进行事件的通信
在 vue1.0 中我们使用 $dispatch 和 $broadcast
- child.vue:
- this.$dispatch('eventName',this.data);
- parent.vue:
- event:{
- 'eventName':function(data) {
- // 执行的方法
- }
- }
但是在 vue2.0 中 $dispatch 和 $broadcast 被弃用, 因为基于组件树结构的事件流方式实在是让人难以理解, 并且在组件结构扩展的过程中会变得越来越脆弱, 并且这只适用于父子组件间的通信. 官方给出的最简单的升级建议是使用集中的事件处理器, 而且也明确说明了 一个空的 vue 实例就可以做到, 因为 Vue 实例实现了一个事件分发接口
在 vue2.0 中在初始化 vue 之前, 给 data 添加一个 名字为 eventhub 的空 vue 对象
- new Vue({
- el: '#app',
- router,
- render: h => h(App),
- data: {
- eventHub: new Vue()
- }
- })
某一个组件内调用事件触发
this.$root.eventHub.$emit('eventName', event.target);
另一个组件内调用事件接收, 在组件销毁时接除事件绑定, 使用 $off 方法
- created() {
- this.$root.eventHub.$on('eventName',(target) => {
- this.functionName(target)
- });
- },
- method:{
- functionName(target) {
- console.log(target);
- }
- }
来源: http://www.qdfuns.com/article/51117/d033077db4cdcf10c836fc831421c3ed.html