在Vue項目中，當我們需要彈出一個對話框組件時，可以使用Dialog組件。但是當需要從父組件中傳遞數據到Dialog組件中或者需要Dialog組件與父組件進行通信時，就需要跨組件通信。

如果我們在Dialog組件中使用Vue官方推薦的provide/inject來從其父組件中傳遞數據，則在大部分情況下，當Dialog被其他組件引用并且不在父層級的時候，就會失效。

一種解決方案是：將Dialog組件的實例注冊到Vue全局實例中，并且使用Vue.$emit和Vue.$on來進行跨組件通信。

// 在Dialog組件中
mounted() {
this.$root.$emit('open-dialog', true);
}
// 在父組件中
mounted() {
this.$root.$on('open-dialog', this.openDialog);
},
methods: {
openDialog(status) {
this.isDialogShow = status;
}
}

還有一種解決方案是使用一個全局的事件總線。其核心思想是：在Vue的原型上添加一個Vue實例，然后使用該實例來進行跨組件通信。

// window.eventBus.js
import Vue from 'vue';
export default new Vue();
// 在Dialog組件中
import EventBus from '@/window.eventBus.js';
mounted() {
EventBus.$emit('open-dialog', true);
}
// 在父組件中
import EventBus from '@/window.eventBus.js';
mounted() {
EventBus.$on('open-dialog', this.openDialog);
},
methods: {
openDialog(status) {
this.isDialogShow = status;
}
}