在开发小项目的时候,我们不希望引入vue的插件vuex,而仅仅使用简单的一个自定义的插件,来解决跨级和兄弟组件通信的问题。
在此,通过vue插件的方式,可以在全局的组件间随意使用;
// 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);
通过使用 this.$bus.emit('add', this.params);
发出。第一个参数为事件名,第二参数为需要传递的数据;
通过使用 this.$bus.emit('add',this.handleData)
接收。 第一个参数为事件名,第二个参数为一个callback的函数,该函数入参就是emit传递过来的参数;