VUE-中央事件总线插件vue-bus

 

 

 

vue-bus.js

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); //加载插件VueBus

 

views/counter.vue

说明：

    1）定义一个按钮，组件有个属性名称是number；

   2）组件定义了一个方法，随机去一个数据，会调用bus定义的一个时间，并将数据传递过去；

 

 

views/index.vue

说明：

    1）导入自定义的组件，计数器；

    2）组件创建和销毁后，分别绑定和基础自定义的事件add，即对add事件进行监听；

    3）接受触发add事件后，接受到传递过来的数据；

 

 

 

效果图