使用
1、首先安装 pubsubjs,执行 npm i pubsub-js
pubsubjs 一个利用 JavaScript 进行发布/订阅的库
pubsubjs 一种组件间通信的方式,适用于任意组件间通信
2、由于是 School 需要接收订阅消息,所以在 School 中先引入 pubsubjs,然后订阅和取消订阅消息
<template>
<!--组件的结构-->
<div class="school">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ address }}</h2>
<span>传过来的消息:{{ msg }}</span>
</div>
</template>
<script>
import pubsub from "pubsub-js";
//组件交互相关的代码(数据、方法等)
export default {
name: "SchoolD",
data() {
return {
name: "北京大学",
address: "北京",
msg: "",
};
},
mounted() {
this.pubid = pubsub.subscribe("hello", (msgName, data) => {
this.msg = data;
console.log(
"有人发布了hello消息," + msgName + "回调执行了,收到数据:" + data
);
});
},
beforeDestroy() {
pubsub.unsubscribe(this.pubid);
},
methods: {
// hello(msgName, data) {
// //两个参数 第一个是方法名 第二个是传过来的数据
// this.msg = data;
// console.log(
// "有人发布了hello消息," + msgName + "回调执行了,收到数据:" + data
// );
// },
},
};
</script>
需要注意,订阅消息时,回调函数写成箭头函数,或者放到 methods 中,否则方法中的 this 是 undefined
3、Student 中引入 pubsubjs,并发布消息
<template>
<!--组件的结构-->
<div class="student">
<h2>学生姓名:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
<button ="sendStudentName">向School组件发送学生姓名</button>
</div>
</template>
<script>
import pubsub from "pubsub-js";
//组件交互相关的代码(数据、方法等)
export default {
name: "StudentD",
data() {
return {
name: "张三",
age: 18,
};
},
methods: {
sendStudentName() {
pubsub.publish("hello", 666);
},
},
};
</script>
总结
消息订阅与发布(pubsub)
1.一种组件间通信的方式,适用于任意组件间通信
2.使用步骤:
①安装pubsub: npm i pubsub-js
②引入:import pubsub from ‘pubsub-js’
3.接收数据:
A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods(){
demo(data){......}
}
......
mounted() {
this.pubid = pubsub.subscribe("xxx", this.demo)
}
4.提供数据:pubsub.publish( "xxx” ,数据)
5.最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅