Vue3 组件通信全攻略：多种方式详解 + 实战场景，轻松玩转复杂数据流！

<!-- 子组件 Child.vue --><script setup>const props = defineProps({  // 基础类型验证  message: {    type: String,    required: true,    default: '默认值'  },  // 复杂类型验证  config: {    type: Object,    default: () => ({ theme: 'dark' })  }})</script> <template>  <div>{{ message }}</div></template>

<!-- 父组件 Parent.vue --><template>  <Child @update:count="handleCountChange" /></template> <script setup>const handleCountChange = (newVal) => {  console.log('Received:', newVal)}</script>

<!-- 父组件 --><template>  <BrotherA @data-change="handleDataChange" />  <BrotherB :shared-data="sharedData" /></template> <script setup>import { ref } from 'vue'const sharedData = ref() const handleDataChange = (data) => {  sharedData.value = data}</script>

// eventBus.jsimport mitt from 'mitt'export const emitter = mitt()

<!-- 组件A --><script setup>import { emitter } from './eventBus.js'const sendData = () => {  emitter.emit('brother-event', { id: 1 })}</script>

<!-- 组件B --><script setup>import { onMounted } from 'vue'import { emitter } from './eventBus.js' onMounted(() => {  emitter.on('brother-event', (data) => {    console.log('Received:', data)  })})</script>

<!-- 祖先组件 --><script setup>import { provide, ref } from 'vue' const theme = ref('dark')provide('Theme', theme)</script>

<!-- 后代组件 --><script setup>import { inject } from 'vue' const theme = inject('Theme', 'light') // 默认值</script>

<!-- 父组件 --><template>  <ChildComponent :style="{ color: 'red' }" @custom-event="handler" /></template>

<!-- 子组件 --><script setup>const props = defineProps({  // 可以接收到所有非props属性})const emit = defineEmits(['custom-event'])</script> <template>  <GrandChild v-bind="$attrs" @click="$emit('custom-event')" /></template>

<!-- 父组件 --><template>  <ChildComponent v-slot="{ data }">    <div>{{ data.value }}</div>  </ChildComponent></template>

<!-- 子组件 --><script setup>const data = ref({ value: 42 })</script> <template>  <slot :data="data"></slot></template>

// stores/counter.jsimport { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', {  state: () => ({ count: 0 }),  actions: {    increment() {      this.count++    }  }})

<!-- 任意组件 --><script setup>import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()</script>

watch(() => props.config, (newVal) => {  // 处理逻辑}, { deep: true })

// 组件卸载时移除监听onUnmounted(() => {  emitter.off('event-name', handler)})

// 错误示例provide('key', reactive({ count: 0 })) // 正确示例const state = reactive({ count: 0 })provide('key', state)