event-bus使用方法
1.定義event-bus組件實(shí)例
import Vue from 'vue'
export const EventBus = new Vue()
2.定義兩個(gè)組件A、組件B跺撼，分別設(shè)置EventBus.on、 EventBus.$off
組件A
<template>
<div class="boats">
我是駕駛艙
<el-button @click="release">發(fā)布消息</el-button>
</div>
</template>
<script>
import { EventBus } from '@/plugins/event-bus'
export default {
methods: {
release() {
// 這個(gè)是對(duì)在頁(yè)面上的已展示組件的發(fā)布影響
EventBus.$emit('platform1', 'wangwu')
}
},
destroyed() {
// 這個(gè)是對(duì)組件B（暫時(shí)未展示組件）起作用的發(fā)布影響
EventBus.$emit('platform1', 'wangwu1')
}
}
</script>
<style scoped></style>
組件B
<template>
<div class="data-analyse">我是數(shù)據(jù)分析{{ name }}</div>
</template>
<script>
import { EventBus } from '@/plugins/event-bus'
export default {
data() {
return {
name: ''
}
},
created() {
const _this = this
EventBus.$on('platform1', function (res) {
_this.name = res
})
},
destroyed() {
EventBus.$off('platform1')
}
}
</script>
<style scoped></style>
event-bus使用注意事項(xiàng)
event-bus的核心是發(fā)布訂閱模式枚抵，要求訂閱者要能獲取到發(fā)布的信息瓢宦，必須在發(fā)布前已經(jīng)注冊(cè)，否則無法獲取到發(fā)布的信息
event-bus在vue中的使用分兩種情況搞动，具體為：
1.組件A躏精、組件B同時(shí)展示頁(yè)面，這時(shí)可以通過寫在methods中的事件發(fā)布信息鹦肿，訂閱組件B通過寫在created中訂閱收到信息矗烛。
2.需先關(guān)閉組件A再打開組件B，組件B獲得信息箩溃，這時(shí)需要注意的是vue組件銷毀與生成的生命周期瞭吃，即先創(chuàng)建組件B，在mouted前destroy組件A涣旨， 這是可以通過寫在destroy中發(fā)布信息歪架，訂閱組件B通過寫在created中收到信息。
