- 一种组件间通信的方式,适用于任意组件间通信
- 使用步骤:
- 1.安装pubsub-js:
npm i pubsub-js
- 2.引入:
import pubsub from 'pubsub-js'
- 3.接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
methods() {
demo(data) {
......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx', this.demo) //订阅消息
}
- 4.提供数据:
pubsub.publish('xxx', 数据)
- 5.最好在beforeDestroy钩子中,用
pubsub.unsubscribe(pid)
去取消订阅
示例代码
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div class="app">