消息的订阅与发布(pubsub-js)
一种组件间的通信方式,适用于任意组件间的通信(使用pubsub-js插件)
安装pubsub-js
使用如下命令进行安装
npm i pubsub-js
# 或
yarn add pubsub-js
引入
在发布消息(提供数据)的组件和订阅消息(获取数据)的组件中引入pubsub-js:
import pubsub from 'pubsub-js'
订阅消息
数据的使用者(接收数据)组件中进行订阅消息。
A组件想要接收数据,则在A组件中订阅消息,订阅消息的回调放在A组件本身。
...
methods: {
demo(message, data) {
...
}
},
...
mounted() {
// 定于消息
// this.pubId = pubsub.subscribe("消息名", 回调函数)
this.pubId = pubsub.subscribe("消息名", this.demo)
},
beforeDestroy() {
// 取消订阅
pubsub.unsubscribe(this.pubId);
},
发布消息
数据的提供者(提供数据)的组件中进行发布消息。
B组件需要提供数据,就在B组件需要提供数据的时候发布消息 pubsub,publish("message", data)
注意
最好在beforeDestroy钩子中使用
pubsub.unsubscribe(this.pubId);
取消消息订阅
School组件(订阅消息)
<template>
<div class="school">
<h2>学校名称:{
{
name}}</h2>
<h2>地址:{
{
address}}</h2>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京·昌平"
}
},
methods: {
demo(messageName, data) {
console.log("有人发布了hello消息,消息订阅的回调执行了", messageName, data);
}
},
mounted() {
// 绑定自定义事件
/* this.$bus.$on("hello", (data) => {
console.log("我是School组件,收到了数据", data)
}) */
this.pubId = pubsub.subscribe("hello", this.demo)
},
beforeDestroy() {
// 解绑事件
// this.$bus.$off("hello");
pubsub.unsubscribe(this.pubId);
},
}
</script>
<style scoped>
.school {
background-color: skyblue;
padding