vue组件通信你还在用笨重的vuex吗

很长一段时间在vue开发项目中组件间通信都是通过vuex实现的，有时候开发一个小项目也要用到vuex来实现组件间交互，有没有一个好的插件可以替代vuex，emmmm~，当然有了！今天给大家介绍一下PubSubJS，PubSubJS是什么？可以实现什么功能？看下面的例子实现关闭弹窗model1

主页面index.vue代码如下

export default { 

  data() {
return {

box: {model1:false}}，

created() {

//订阅关闭弹窗事件
PubSub.subscribe("model-close", (event, data) => {
  this.close(data.modal);

          console.log(data.mess) //打印"关闭弹窗"

}); 

}，

methods: {

close(model) {

this.box[model]=false}

}

}

model1.vue组件

export default{
data(){
return{
}
},
methods:{
close(){

                             //发布关闭弹窗事件
   PubSub.publish("model-close",
{model:"model1",mess:"关闭弹窗"});
}
}
}

上面简单的代码就实现了子组件想父组件通信功能，你可能很不屑得说，vue自带的on和emit不就可以实现这个功能干嘛搞这么麻烦，对的，on和emit的确也可以实现了子组件和父组件通信，但是如果是非父子组件通信呢，用on和emit实现是不是就显得很繁琐了

不管是父子之间还是非父子之间通信PubSubJS都可以实现，但是必须先执行订阅事件subscribe然后才能publish发布事件

源码地址：https://github.com/mroderick/PubSubJS