方法一：通過父組件中轉（Props + Emits）

<!-- ParentComponent.vue -->
<template><ChildA :message-from-b="messageFromB" @send-to-b="handleSendToB" /><ChildB :message-from-a="messageFromA" @send-to-a="handleSendToA" />
</template><script setup>
import { ref } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'const messageFromA = ref('')
const messageFromB = ref('')const handleSendToA = (message) => {messageFromA.value = message
}const handleSendToB = (message) => {messageFromB.value = message
}
</script><!-- ChildA.vue -->
<template><div><p>收到B的消息: {{ messageFromB }}</p><button @click="sendMessage">發送消息給B</button></div>
</template><script setup>
defineProps(['messageFromB'])
const emit = defineEmits(['send-to-b'])const sendMessage = () => {emit('send-to-b', '這是來自A的消息')
}
</script><!-- ChildB.vue -->
<template><div><p>收到A的消息: {{ messageFromA }}</p><button @click="sendMessage">發送消息給A</button></div>
</template><script setup>
defineProps(['messageFromA'])
const emit = defineEmits(['send-to-a'])const sendMessage = () => {emit('send-to-a', '這是來自B的消息')
}
</script>

方法二：使用 Provide/Inject

<!-- ParentComponent.vue -->
<template><ChildA /><ChildB />
</template><script setup>
import { provide, ref } from 'vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'const sharedState = ref({messageFromA: '',messageFromB: ''
})provide('sharedState', sharedState)
</script><!-- ChildA.vue -->
<template><div><p>收到B的消息: {{ sharedState.messageFromB }}</p><button @click="sendMessage">發送消息給B</button></div>
</template><script setup>
import { inject } from 'vue'const sharedState = inject('sharedState')const sendMessage = () => {sharedState.value.messageFromA = '這是來自A的消息'
}
</script><!-- ChildB.vue -->
<template><div><p>收到A的消息: {{ sharedState.messageFromA }}</p><button @click="sendMessage">發送消息給A</button></div>
</template><script setup>
import { inject } from 'vue'const sharedState = inject('sharedState')const sendMessage = () => {sharedState.value.messageFromB = '這是來自B的消息'
}
</script>

方法三：使用 Vuex/Pinia 狀態管理

// stores/messageStore.js
import { defineStore } from 'pinia'export const useMessageStore = defineStore('messages', {state: () => ({messageFromA: '',messageFromB: ''}),actions: {setMessageFromA(message) {this.messageFromA = message},setMessageFromB(message) {this.messageFromB = message}}
})

<!-- ParentComponent.vue -->
<template><ChildA /><ChildB />
</template><script setup>
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
</script><!-- ChildA.vue -->
<template><div><p>收到B的消息: {{ messageStore.messageFromB }}</p><button @click="sendMessage">發送消息給B</button></div>
</template><script setup>
import { useMessageStore } from '@/stores/messageStore'const messageStore = useMessageStore()const sendMessage = () => {messageStore.setMessageFromA('這是來自A的消息')
}
</script><!-- ChildB.vue -->
<template><div><p>收到A的消息: {{ messageStore.messageFromA }}</p><button @click="sendMessage">發送消息給A</button></div>
</template><script setup>
import { useMessageStore } from '@/stores/messageStore'const messageStore = useMessageStore()const sendMessage = () => {messageStore.setMessageFromB('這是來自B的消息')
}
</script>

方法四：使用事件總線（Event Bus）

<!-- ParentComponent.vue -->
<template><ChildA /><ChildB />
</template><script setup>
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
</script><!-- ChildA.vue -->
<template><div><p>收到B的消息: {{ messageFromB }}</p><button @click="sendMessage">發送消息給B</button></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import eventBus from './eventBus'const messageFromB = ref('')const sendMessage = () => {eventBus.emit('message-to-b', '這是來自A的消息')
}onMounted(() => {eventBus.on('message-to-a', (message) => {messageFromB.value = message})
})onUnmounted(() => {eventBus.off('message-to-a')
})
</script><!-- ChildB.vue -->
<template><div><p>收到A的消息: {{ messageFromA }}</p><button @click="sendMessage">發送消息給A</button></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import eventBus from './eventBus'const messageFromA = ref('')const sendMessage = () => {eventBus.emit('message-to-a', '這是來自B的消息')
}onMounted(() => {eventBus.on('message-to-b', (message) => {messageFromA.value = message})
})onUnmounted(() => {eventBus.off('message-to-b')
})
</script>