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);
}