Vue Event Bus 解决组件的数据传递

发表于 | 分类于 ， | 0 Comments | 阅读次数

背景

在不使用vuex的情况下，实现非父子组件的数据传递。
当然你项目中使用着vuex就不必要再用event bus了。

使用方法

我们需要有一个 Vue 实例来充当通信媒介的作用

创建一个 src/bus.js

1
2
3
// src/bus.js
import Vue from 'vue'
export default new Vue()

在组件A中使用 $on(eventName) 监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Bus from 'src/bus'  // 引入bus.js文件

export default {
  data () {
    return {
      title: ''
    }
  },
  created () {
    // $on
    Bus.$on('setTitle', text => {
      this.title = text;
    });
  }  
}

在组件B中使用 $emit(eventName) 触发事件

1
2
3
4
5
6
7
8
9
import Bus from 'src/bus'

export default {
  methods:{
    emitTitle () {
      Bus.$emit('setTitle', '我的标题')
    }
  }  
}

总结

这个方法只是利用vue实例实现通讯。用$on、$emit来监听和触发事件。