Props

父組件可以通過?props?將數據傳遞給子組件。這是最常見的組件間通信方式

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

   <!-- 子組件 --><template><div>{{ message }}</div></template><script>export default {props: {message: String,},};</script>

自定義事件 (Emit)?

子組件可以通過?$emit?觸發事件將數據傳遞回父組件。

   <!-- 子組件 --><template><button @click="sendToParent">Send to Parent</button></template><script>export default {methods: {sendToParent() {this.$emit('custom-event', 'Hello from Child');},},};</script>

   <!-- 父組件 --><template><ChildComponent @custom-event="handleEvent" /></template><script>import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {handleEvent(message) {console.log(message);},},};</script>

Vuex?

Vuex 是 Vue 的狀態管理庫，可以用來在多個組件間共享狀態。

Provide / Inject?

這是一種從祖先組件注入數據到后代組件的方式，而無需逐層傳遞 props。

Ref 和 Reactive?

使用 Composition API，可以利用 refs 和 reactive 數據來實現組件間的通信。

Event Bus

?雖然在 Vue 3 中，官方推薦使用 Composition API 和其它更現代的通信方式，但在某些情況下，你可能仍然會使用 Event Bus（事件總線）。這通常涉及到創建一個全局事件中心，組件可以通過它發送和接收事件。

   // src/eventBus.jsimport { onMounted, onBeforeUnmount } from 'vue';import mitt from 'mitt';const eventBus = mitt();export default eventBus;

   <!-- 發送方組件 --><script>import eventBus from '@/eventBus';export default {onMounted() {eventBus.on('someEvent', payload => {console.log(payload);});},onBeforeUnmount() {eventBus.off('someEvent');},methods: {triggerEvent() {eventBus.emit('someEvent', 'Hello from Sender');},},};</script>

選擇哪種方式取決于你的具體需求和組件層次結構。對于簡單的父子組件關系，使用 Props 和自定義事件通常就足夠了。對于更復雜的場景，如非父子組件之間的通信，Vuex 或者 Event Bus 可能會更加合適。