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