Vuejs - 在非父子組件之間交換信息

Question

我正在嘗試在兩個 VueJs 組件之間交換信息。

這是情況：

組分A是主要組分。 B和C歸A，D歸C。

我想從組件 B 更改組件 D 的變量值。

我在這里看到，如果組件使用相同的根組件，我們可以從第一個組件到根組件進行廣播，然后將廣播數據從根組件發送到第二個組件。 但就我而言，我的組件 D 並不直接位於“組件樹”的根目錄中，而是位於“組件樹”的更深處……所以，我嘗試過，但似乎這不起作用。

什么是最簡單或更優雅的方法來做到這一點？

謝謝。

Answer 1

對於這樣的事情，我會使用 vue 文檔中描述的 Eventbus； 一個空白的 Vue 對象，用於以不可知的方式傳遞信息。

window.EventBus = new Vue();

然后在接收數據的組件中，您將創建一個事件。

mounted: function () {
    EventBus.$on('name', function (data) {
        // Do something with the data
    });
}

最后，在發送數據的組件中，您需要調用該函數。

methods: {
    someFunction: function () {
        EventBus.$emit('name', data);
    }
}

您可以創建一個原型鏈接，提供對 EventBus 對象的訪問以方便使用。

Vue.prototype.$eventBus = window.EventBus

您可以通過使用this.$eventBus.$on或this.$eventBus.$emit如jsFiddle 所示。