Vue-bus中央事件总线插件

这个插件可以在可以在所有的组件之间随意使用
const install = function (Vue) {
    const Bus = new Vue({
        methods: {
            emit (event, ...args) {
                this.$emit(event, ...args);
            },
            on (event, callback) {
                this.$on(event, callback);
            },
            off (event, callback) {
                this.$off(event, callback);
            }
        }
    });
    Vue.prototype.$bus = Bus;
};

export default install;
  • 在main.js中使用插件:
import VueBus from './vue-bus' ;
Vue.use(VueBus);
  • 使用vue-bus有两点需要注意,第一是 $bus.on应该在 created钩子内使用,如果在mounted使用,它可能接受不到其他组件来自created钩子发出的事件;第二点是使用了$bus.on,在beforeDestroy钩子里应该使用$bus.off解除,因为组件销毁后,就没必要把监听的句柄储存在vue-bus里了。
created() {
    this.$bus.on('add',this.addfunction);
}

beforedestroy() {
  this.$$bus.off('add',this.addfunction);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,629评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,751评论 1 52
  • 飘雪了 像极了撒哈拉里的沙 粒粒竭尽思念 你站在雪里 雪似你 你似雪 片片柔尽绵意 人生若只如初见 何事秋风悲画扇...
    旭敏阅读 232评论 0 4
  • 以心为原点 以时间为轴 画一条抛物线 住事象风一样逝去 生活把记忆逼到墙角 ...
    兰妤妤阅读 283评论 2 5