24-vue中组件的通信方式之一:消息的订阅与发布的使用pubsub、 pubsub-js库的安装

1.pubsub-js库的安装

使用 消息订阅与发布,先在对应的项目中Terminal里安装pubsub-js库

1、查看pubsub-js 库是否已经存在该库命令:

npm info pubsub-js

2、若不存在,则先安装pubsub-js 库,命令如下:

npm install --save pubsub-js

**注意:**上面两条命令,在vue项目的终端Terminal中输入

2.消息的订阅与发布的使用

优点:

  消息订阅与发布 优点: 父子通信 、逐层通信、兄弟组件通信 等等都可以,没有"位置"上的限制,摆脱逐层传递的限制, 直接进行跨组件传递信息(例如函数的调用)

理解:
  订阅消息 相当于 绑定事件监听(并执行函数体)
  发布消息 相当于 触发事件

使用:

  ①消息的订阅:PubSub.subcribe(“函数名”,(msg,函数参数)=>{
函数体//可以在methods中声明定义
})
  ②消息的发布:PubSub.publish(“函数名”,函数参数)
  ③ 使用方法前,先引入pubsub-js库:
         “import PubSub from “pubsub-js”;”

代码示例:

父组件代码:
import PubSub from "pubsub-js";
mounted () {//执行异步代码
  	//订阅消息    subcribe("事件名",回调函数<尽量使用箭头函数,调用外部的this>)
	PubSub.subcribe("事件名",(msg,index)=>{   // msg:事件名
	函数体 //可以在methods中声明定义
})
子组件代码:
import PubSub from "pubsub-js";
methods:{
	// 发布消息
	PubSub.publish("deleteTodo",index);
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值