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

猜你喜欢

转载自blog.csdn.net/A_Bow/article/details/113800166