方法一：通过父组件中转（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>
