在 Vue.js 中，組件是構(gòu)建應(yīng)用程序的基本單位。然而，當(dāng)你的應(yīng)用程序變得復(fù)雜時(shí)，組件之間的通信變得至關(guān)重要。本文將介紹幾種 Vue 組件之間通信的方式，幫助你更好地管理和組織代碼。

父子組件通信

父組件可以通過 props 向子組件傳遞數(shù)據(jù)，子組件則可以通過 $emit 向父組件發(fā)送事件。

通過 props 傳遞數(shù)據(jù)

父組件通過 props 向子組件傳遞數(shù)據(jù)：

<!-- 父組件 -->
<template><div><child-component :message="parentMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent!'};}
};
</script>

子組件通過 props 接收數(shù)據(jù)：

<!-- 子組件 -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: ['message']
};
</script>

通過 $emit 發(fā)送事件

子組件通過 $emit 向父組件發(fā)送事件：

<!-- 子組件 -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {methods: {sendMessage() {this.$emit('message-sent', 'Hello from Child!');}}
};
</script>

父組件監(jiān)聽子組件的事件：

<!-- 父組件 -->
<template><div><child-component @message-sent="handleMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleMessage(message) {console.log(message);  // 輸出 'Hello from Child!'}}
};
</script>

兄弟組件通信

兄弟組件之間通常通過事件總線（Event Bus）或 Vuex 狀態(tài)管理來實(shí)現(xiàn)通信。

使用事件總線

創(chuàng)建一個(gè)事件總線：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在兄弟組件中使用事件總線：

<!-- 組件 A -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
import { EventBus } from './event-bus.js';export default {methods: {sendMessage() {EventBus.$emit('message-sent', 'Hello from Component A!');}}
};
</script>
<!-- 組件 B -->
<template><div><p>{{ message }}</p></div>
</template><script>
import { EventBus } from './event-bus.js';export default {data() {return {message: ''};},created() {EventBus.$on('message-sent', (message) => {this.message = message;});}
};
</script>

使用 Vuex

使用 Vuex 是管理應(yīng)用程序狀態(tài)的最佳實(shí)踐。首先安裝并配置 Vuex：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {message: ''},mutations: {setMessage(state, message) {state.message = message;}},actions: {updateMessage({ commit }, message) {commit('setMessage', message);}}
});

在組件中使用 Vuex：

<!-- 組件 A -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {methods: {sendMessage() {this.$store.dispatch('updateMessage', 'Hello from Component A!');}}
};
</script><!-- 組件 B -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {computed: {message() {return this.$store.state.message;}}
};
</script>

父子組件通信與兄弟組件通信總結(jié)

理解 Vue 組件之間的通信是開發(fā)復(fù)雜應(yīng)用程序的關(guān)鍵。通過 props 和 $emit 進(jìn)行父子組件通信，以及使用事件總線或 Vuex 進(jìn)行兄弟組件通信，你可以更有效地管理和組織代碼。