vue組件有父子組件通信:props
兄弟組件通信:
可以使用vuex，還可以使用事件總線(xiàn)eventBus
使用方法：
1.初始化：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
另外一種方式，可以直接在項(xiàng)目中的 main.js 初始化 EventBus :
// main.js
Vue.prototype.$EventBus = new Vue()
2.發(fā)送事件
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.on("aMsg", (msg) => {
// A發(fā)送來(lái)的消息
this.msg = msg;
});
EventBus如果使用不善魁淳，EventBus會(huì)是一種災(zāi)難，到底是什么樣的“災(zāi)難”了圆丹？大家都知道vue是單頁(yè)應(yīng)用，如果你在某一個(gè)頁(yè)面刷新了之后躯喇，與之相關(guān)的EventBus會(huì)被移除辫封，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁(yè)面廉丽，EventBus在監(jiān)聽(tīng)的時(shí)候就會(huì)觸發(fā)很多次倦微，也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系正压。通常會(huì)用到欣福，在vue頁(yè)面銷(xiāo)毀時(shí)，同時(shí)移除EventBus事件監(jiān)聽(tīng)焦履。
4.移除監(jiān)聽(tīng)
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在這個(gè)特定的總線(xiàn)中使用兩個(gè)方法emit拓劝。一個(gè)用于創(chuàng)建發(fā)出的事件，它就是
on：
var EventBus = new Vue();
this.emit('nameOfEvent', { ... pass some event data ...});
this.on('nameOfEvent',(
bus.$emit("sendMsg", '我是web秀');郑临，另一個(gè)Vue頁(yè)面使用
this.on('updateMessage', function(value) {
console.log(value); // 我是web秀
})
同時(shí)也可以使用this.off('sendMsg')來(lái)移除事件監(jiān)聽(tīng)。
