封装一个中央总线bus文件 在vue脚手架中使用

1.了解vue的童鞋可能知道 在非父子组件之间的通信 我们需要 一个空的vue实例 var  bus =new Vue()

如果 我们想在脚手架中想使用 毕竟在实际的项目中 要想实现 兄弟组件之间的通信呢

这个时候可能有人会说可以用 vuex 数据状态管理器 咱这里先不说 刷新之后 数值回初始值的问题

vuex适合在稍大的项目中使用  并不是我们所要的项目都需要 vuex状态管理 可能有一种杀鸡用牛刀的感觉

没有最好的技术 只有适合我们项目的才是更好的 这个才是做项目选技术首选要考虑的

2.费话不多少了  直接上思路和代码

现在创建好的脚手架中   我使用的是 cli 3.*版本的

src/assets 创建一个 vue-bus.js文件

import Vue from "vue";

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;

3.在main.js中注册

import VueBus from '@/assets/vue-bus.js'

Vue.use(VueBus);

4.在组件a中触发 在组件b中接受

a组件

a:this.$bus.emit('add',num);

b组件

methods:{

        handleEvent(num){

                      console.log(num)

         }

}

b:this.$bus.on('add',this.hanldeEvent)

注意监听的这里 最好放到 组建的created函数 否则监听不到其他组件的created传来的参数

created(){this.$bus.on('add',num=>{console.log(num})}

c.同时就是 在组建销毁之后 最好也取消 监听的句柄 不要造成浪费

beforeDestroy(){this.$bus.off("add",this.hanldeEvent.)}