一文详解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.js
import 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.js
import { 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)