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

主页面index.vue代码如下

export default { 

  data() {
         return {
           box: {model1:false}
        }
},
created() {
//订阅关闭弹窗事件
     PubSub.subscribe("modelClose", (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("modelClose", {model:"model1",mess:"关闭弹窗"});
  }
}
}

上面简单的代码就实现了子组件和父组件通信功能,你可能很不屑得说,vue自带的on和emit不就可以实现这个功能干嘛搞这么麻烦,对的,on和emit的确也可以实现了子组件和父组件通信,但是如果是非父子组件通信呢,用on和emit实现是不是就显得很繁琐了,另外PubSubJS不依赖于任何库和不限于任一框架

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

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

 

 

Logo

前往低代码交流专区

更多推荐