Vue 组件通信之 Bus

bus详细描述：

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

组件通信bus的使用

公共js文件夹utils中定义bus.js

?

1 2 3

import Vue from 'vue' const bus = new Vue() export default bus

main.js中引入bus，并将bus挂载到vue.prototype上

?

1 2 3 4

// 引入bus import bus from '@/utils/bus.js' // 挂载到原型上 Vue.prototype.$bus = bus

然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件　

分发事件的组件

?

1 2 3 4 5

methods: {   todo: function () {     this.$bus.$emit('todoSth', params);  //params是传递的参数   } }

监听的组件

?

1 2 3 4 5 6 7 8 9 10

created() {   this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作       //todo something   }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () {   this.$bus.$off('todoSth'); },

如果需要监听多个组件，只需要更改 bus 的 eventName

?

1 2 3 4 5 6 7 8 9

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); },