Vue 消息的订阅与发布(pubsub)
这是一种组件间的通信方式,适用于:任意组件间通信
安装 pubub
npm i pubsub-js
引入 pubub
import pubsub from 'pubsub-js'
提供数据
pubsub.publish('xxx',数据)
接收数据
A 组件需要接收数据,则在 A 组件中订阅消息,订阅的回调留在 A 组件自身
methods: {
demo(msgName, data){...}
},
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo)
}
接收数据还有一种写法
mounted() {
this.pid = pubsub.subscribe('xxx',(msgName, data)=>{...})
}
注意:最好在 beforeDestroy 钩子中,去取消订阅
beforeDestroy() {
pubsub.unsubscribe(this.pid)
}
实例
src 文件结构'
|-- src
|-- App.vue
|-- main.js
|-- components
|-- MySchool.vue
|-- MyStudent.vue
App.vue
<template>
<div>
<my-school/>
<my-student/>
</div>
</template>
<script>
import MySchool from "@/components/MySchool";
import MyStudent from "@/components/MyStudent";
export default {
name: 'App',
components: {
MySchool,
MyStudent
}
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
MySchool.vue
<template>
<div class="demo">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
// 引入 pubub
import pubsub from 'pubsub-js'
export default {
name: "MySchool",
data() {
return {
name: 'ABC',
address: '长沙'
}
},
methods: {
demo(msgName, data) {
console.log('有人发布了 hello 消息,hello 消息的回调执行了', msgName, data)
}
},
// 接收数据
mounted() {
this.pubId = pubsub.subscribe('hello', this.demo)
},
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
}
}
</script>
<style scoped>
.demo {
background-color: #9ebbfc;
}
</style>
MyStudent.vue
<template>
<div class="demo">
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
<button @click="sendStudentName">把学生姓名给 School 组件</button>
</div>
</template>
<script>
// 引入 pubub
import pubsub from 'pubsub-js'
export default {
name: "MyStudent",
data() {
return {
name: '张三',
age: 19
}
},
methods: {
// 提供数据
sendStudentName() {
pubsub.publish('hello', this.name)
}
}
}
</script>
<style scoped>
.demo {
background-color: #b2dece;
}
</style>