Vue 中如何跨組件通信？

簡(jiǎn)介：
在 Vue.js 應(yīng)用程序中，跨組件通信至關(guān)重要，以共享數(shù)據(jù)和事件。以下是實(shí)現(xiàn)跨組件通信的幾種方法：

父子通信：

通過(guò)屬性傳遞數(shù)據(jù)：父組件將數(shù)據(jù)作為 prop 傳遞給子組件，子組件使用 v-bind 來(lái)綁定數(shù)據(jù)。
通過(guò)事件觸發(fā)：子組件觸發(fā)一個(gè)事件，并傳遞數(shù)據(jù)給父組件，父組件在父組件的模板中監(jiān)聽(tīng)事件。

祖先-后代通信：

通過(guò) provide/inject：祖先組件提供一個(gè)數(shù)據(jù)源，后代組件通過(guò) inject 來(lái)獲取數(shù)據(jù)。

兄弟組件通信：

通過(guò) Event Bus：創(chuàng)建一個(gè) Vue 實(shí)例來(lái)充當(dāng)事件總線，所有組件都可以監(jiān)聽(tīng)和觸發(fā)事件。
通過(guò) Vuex 狀態(tài)管理：使用 Vuex 狀態(tài)管理庫(kù)，存儲(chǔ)全局狀態(tài)并讓所有組件訪問(wèn)。

自定義事件：

通過(guò) $emit/$on：在子組件中通過(guò) $emit 觸發(fā)自定義事件，在父組件中通過(guò) $on 監(jiān)聽(tīng)事件。

屬性傳遞示例：

<code class="HTML"><!-- 父組件 -->
<template><child-component :message="message"></child-component></template></code>

<code class="HTML"><!-- 子組件 -->
<template><div>{{ message }}</div>
</template></code>

通過(guò)事件觸發(fā)示例：

<code class="HTML"><!-- 子組件 -->
<template><button>觸發(fā)事件</button>
</template><script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', '事件數(shù)據(jù)');
    }
  }
};
</script></code>

<code class="HTML"><!-- 父組件 -->
<template><child-component></child-component></template><script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 輸出：事件數(shù)據(jù)
    }
  }
};
</script></code>