在 vue.js 中，跨組件通信可以通過(guò)以下幾種方式實(shí)現(xiàn)：父子通信：通過(guò) props 傳遞數(shù)據(jù)或事件觸發(fā)。祖先-后代通信：通過(guò) provide/inject 共享數(shù)據(jù)源。兄弟組件通信：通過(guò)事件總線、vuex 狀態(tài)管理或自定義事件。
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>
登錄后復(fù)制
<code class="HTML"><!-- 子組件 -->
<template><div>{{ message }}</div>
</template></code>
登錄后復(fù)制
通過(guò)事件觸發(fā)示例：
<code class="HTML"><!-- 子組件 -->
<template><button>觸發(fā)事件</button>
</template><script>
export default {
methods: {
emitMessage() {
this.$emit('message', '事件數(shù)據(jù)');
}
}
};
</script></code>
登錄后復(fù)制
<code class="HTML"><!-- 父組件 -->
<template><child-component></child-component></template><script>
export default {
methods: {
handleMessage(message) {
console.log(message); // 輸出：事件數(shù)據(jù)
}
}
};
</script></code>
登錄后復(fù)制
