Vue Bus使用总结

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件还不熟悉的可以查看这里

官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。

官方也推荐了一种非父子组件的通信,在简单的场景下,可以使用一个空的 Vue 实例作为事件总线也就是下面要说的 Bus

我习惯把Bus定义在全局,这样使用起来的时候就不用再去单独引用。

// app.js
var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = new Vue()
    }
};
Vue.use(eventBus);

或者可以新建一个event-bus.js文件:

import Vue from 'vue'
export const EventBus = new Vue()

然后在其他页面引入:

import { EventBus } from '@/assets/js/event-bus.js';

就可以在组件中,可以使用$emit$on$off 分别来分发、监听、取消监听事件:

分发事件的组件:

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

监听的组件:

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

添加新评论