深入理解 Vue 3 組件通信
在 Vue 3 中，組件通信是一個關鍵的概念，它允許我們在組件之間傳遞數據和事件。本文將介紹幾種常見的 Vue 3 組件通信方法，包括 props、emits、provide 和 inject、事件總線以及 Vuex 狀態管理。
1. 使用 props 和 emits 進行父子組件通信
props 傳遞數據
props 是父組件向子組件傳遞數據的一種機制。在子組件中，通過定義 props 屬性來接收父組件傳遞的數據。
父組件 (ParentComponent.vue)：
<template> <ChildComponent :message="parentMessage" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent Component!' }; } }; </script>
子組件 (ChildComponent.vue)：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>
emits 傳遞事件
子組件可以通過 $emit 方法向父組件發送事件，從而實現從子組件向父組件傳遞信息。
子組件 (ChildComponent.vue)：
<template> <button @click="sendMessage">Send Message</button> </template> <script> export default { emits: ['messageSent'], methods: { sendMessage() { this.$emit('messageSent', 'Hello from Child Component!'); } } }; </script>
父組件 (ParentComponent.vue)：
<template> <ChildComponent @messageSent="handleMessage" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleMessage(message) { console.log(message); } } }; </script>
2. 使用 provide 和 inject 進行祖孫組件通信
provide 和 inject 允許祖父組件和孫組件之間進行通信，而不需要通過中間的父組件傳遞數據。
祖父組件 (GrandparentComponent.vue)：
<template> <ParentComponent /> </template> <script> import ParentComponent from './ParentComponent.vue'; export default { components: { ParentComponent }, provide() { return { grandparentMessage: 'Hello from Grandparent Component!' }; } }; </script>
孫組件 (GrandchildComponent.vue)：
<template>
<div>{{ grandparentMessage }}</div>
</template>
<script>
export default {
inject: ['grandparentMessage']
};
</script>
3. 使用事件總線進行兄弟組件通信
事件總線是一種常見的用于兄弟組件通信的方法，通常使用 Vue 實例作為事件總線。
事件總線 (eventBus.js)：
import { reactive } from 'vue';
const eventBus = reactive({});
export default eventBus;
組件 A (ComponentA.vue)：
<template> <button @click="sendMessage">Send Message to Component B</button> </template> <script> import eventBus from './eventBus.js'; export default { methods: { sendMessage() { eventBus.message = 'Hello from Component A!'; } } }; </script>
組件 B (ComponentB.vue)：
<template>
<div>{{ message }}</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import eventBus from './eventBus.js';
export default {
setup() {
const state = reactive({
message: ''
});
state.message = eventBus.message;
return {
...toRefs(state)
};
}
};
</script>
浙公網安備 33010602011771號