VUE常用知识点Vue

Vue-EventBus心得

2019-04-25  本文已影响102人  念念碎平安夜

Case 1:

1、新建event.js文件,初始化

// event-bus.js
importVuefrom 'vue'
exportconstEventBus = newVue()

2、在发送以及接收的组件中都引入此 event.js

import {
    EventBus
}from "../event-bus.js";

3、发送组件加入代码

EventBus.$emit("hello", this.number);

4、接收组件加入代码

EventBus.$on("hello", (number) = > {
    console.log(number)
});

Case 2:

直接在项目中的main.js初始化EventBus,具体发送、接收,同上Case1

// main.js
Vue.prototype.$EventBus = new Vue()

Case3:

解释说明:中央事件总线bus,其作为一个简单的组件传递事件,用于解决跨级和兄弟组件通信的问题,将其封装为一个Vue的插件,那么就可以在组件之间使用,而不需要导入bus

1、新建目录vue-bus,在目录里新建vue-bus.js文件,具体代码如下:

//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;

注:emit(event,...args)中的...args是函数参数的解构,因为不知道组件会传递多少个参数进来,使用...args可以把当前参数到最后的参数全部获取到。

2、在main.js中使用插件:

//main.js
import VueBus from './vue-bus/vue-bus';
Vue.use(VueBus);

3、发送组件加入代码

this.$bus.emit('hello',this.number,this.number2);

4、接收组件加入代码

this.$bus.on('hello', (number, number2) = > {
    console.log(number)
    console.log(number2)
})

综上所述,对于Case3的方式,通过插件的形式使用后,所有的组件都可以直接使用$bus,不需要每一个组件都导入bus组件。

有两点需要注意:
1、$bus.on应该在created钩子内使用,如果在mounted使用,有可能接收不到其他组件来自created钩子内发出的事件。

2、使用了$bus.on,在beforeDestroy钩子里应该再使用$bus.off解除,因为组件销毁后,没有必要把监听句柄存储在vue-bus里了。

beforeDestroy() {
    this.$bus.off('hello', something);
}
上一篇下一篇

猜你喜欢

热点阅读