vue 组件间通信 PubSub 发布订阅

约定不等于承诺〃 2022-04-13 05:54 344阅读 0赞

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

(先安装npm install --save pubsub-js，在需要的组件里引入“import PubSub from ‘pubsub-js’”)  
主页面index.vue代码如下

export default { 
    
      data() {
    	   return {
    	     box: {model1:false}
    	   }，
      created() {
    	//订阅关闭弹窗事件 参数event指"model-close"，没什么用
    	 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不依赖于任何库和不限于任一框架

不管是父子之间还是非父子之间通信PubSubJS都可以实现，但是必须先执行订阅事件subscribe然后才能publish发布事件  
[关于对vue props值修改的问题，用$emit或pubsub-js代替][vue props_emit_pubsub-js]

## 源码地址：[https://github.com/mroderick/PubSubJS][https_github.com_mroderick_PubSubJS] ##

作者：沫沫小  
来源：CSDN  
原文：[https://blog.csdn.net/qq\_21430819/article/details/79237413][https_blog.csdn.net_qq_21430819_article_details_79237413]  
版权声明：本文为博主原创文章，转载请附上博文链接！

[vue props_emit_pubsub-js]: https://blog.csdn.net/zhaohanqq/article/details/85629102
[https_github.com_mroderick_PubSubJS]: https://github.com/mroderick/PubSubJS
[https_blog.csdn.net_qq_21430819_article_details_79237413]: https://blog.csdn.net/qq_21430819/article/details/79237413