vue 组件间通信 PubSub 发布订阅

很长一段时间在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代替

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

作者:沫沫小
来源:CSDN
原文:https://blog.csdn.net/qq_21430819/article/details/79237413
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值