在 vue.js 中，跨組件通信可以通過以下幾種方式實現：父子通信：通過 props 傳遞數據或事件觸發。祖先-后代通信：通過 provide/inject 共享數據源。兄弟組件通信：通過事件總線、vuex 狀態管理或自定義事件。
Vue 中如何跨組件通信？
簡介：
在 Vue.js 應用程序中，跨組件通信至關重要，以共享數據和事件。以下是實現跨組件通信的幾種方法：
父子通信：
通過屬性傳遞數據：父組件將數據作為 prop 傳遞給子組件，子組件使用 v-bind 來綁定數據。
通過事件觸發：子組件觸發一個事件，并傳遞數據給父組件，父組件在父組件的模板中監聽事件。
祖先-后代通信：
通過 provide/inject：祖先組件提供一個數據源，后代組件通過 inject 來獲取數據。
兄弟組件通信：
通過 Event Bus：創建一個 Vue 實例來充當事件總線，所有組件都可以監聽和觸發事件。
通過 Vuex 狀態管理：使用 Vuex 狀態管理庫，存儲全局狀態并讓所有組件訪問。
自定義事件：
通過 $emit/$on：在子組件中通過 $emit 觸發自定義事件，在父組件中通過 $on 監聽事件。
屬性傳遞示例：
<code class="HTML"><!-- 父組件 --> <template><child-component :message="message"></child-component></template></code>
登錄后復制
<code class="HTML"><!-- 子組件 -->
<template><div>{{ message }}</div>
</template></code>
登錄后復制
通過事件觸發示例：
<code class="HTML"><!-- 子組件 -->
<template><button>觸發事件</button>
</template><script>
export default {
methods: {
emitMessage() {
this.$emit('message', '事件數據');
}
}
};
</script></code>
登錄后復制
<code class="HTML"><!-- 父組件 -->
<template><child-component></child-component></template><script>
export default {
methods: {
handleMessage(message) {
console.log(message); // 輸出：事件數據
}
}
};
</script></code>
登錄后復制
