一种组件间通信的方式，适用于
任意组件间通信。-
使用步骤：
安装 pubsub：
npm install pubsub-js引入:
import pubsub from 'pubsub-js'-
接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的
回调留在 A 组件自身。methods(){ demo(data){......} } mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 } 提供数据：
pubsub.publish('xxx',数据)最好在 beforeDestroy 钩子中，用
PubSub.unsubscribe(pid)去取消订阅。
3.举个例子:
Student组件给School组件传递数据
Student.vue组件
<template>
<div>
<button @click="sendStudentName">把名字传递给school组件</button>
</div>
</template>
<script>
import pubsub from "pubsub-js";
export default {
data() {
return {
name: "janny",
};
},
methods: {
sendStudentName() {
pubsub.publish("hello", this.name);
},
},
};
</script>
School.vue组件
<template>
<div>
<h1>School组件</h1>
<h2>{{ name }}</h2>
</div>
</template>
<script>
import pubsub from "pubsub-js";
export default {
name: "",
data() {
return {
name: "小虾皮陈",
age: 18,
helloId: null,
};
},
mounted() {
this.helloId = pubsub.subscribe("hello", (a, b) => {
//第一个参数表示订阅的是哪个函数,第二个参数才是真正接收的传递过来的数据
//注意:这里回调函数要写成箭头函数的形式,否则里面的this就不确定了
this.name = b;
console.log("School组件收到数据了", a, b);
});
},
beforeDestroy() {
// 在组件销毁的时候取消订阅
pubsub.unsubscribe(this.helloId);
},
};
</script>
