Vue3组件通信8大方式详解

Vue 3 组件通信方式

1. Props / emits（父子组件通信）

父组件向子组件传递数据

// 父组件
<ChildComponent :message="parentMessage" />

// 子组件
props: ['message']
// 或者
defineProps(['message'])

子组件向父组件传递事件

// 子组件
emit('childEvent', data)
// 或者
const emit = defineEmits(['childEvent'])

// 父组件
<ChildComponent @childEvent="handleChildEvent" />

2. provide / inject（跨层级组件通信）

// 祖先组件
import { provide } from 'vue'
provide('theme', 'dark')

// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'default')

3. v-model（双向绑定）

// 父组件
<ChildComponent v-model="value" />
// 等价于
<ChildComponent :modelValue="value" @update:modelValue="value = $event" />

// 子组件
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

4. $attrs / $slots（属性透传和插槽）

// 父组件
<ChildComponent custom-attr="value">
  <template #default>默认插槽</template>
  <template #named>具名插槽</template>
</ChildComponent>

// 子组件访问
useAttrs() // 获取 $attrs
useSlots() // 获取 $slots

5. refs / $parent / $refs（直接访问）

// 父组件访问子组件实例
const childRef = ref(null)
childRef.value.childMethod()

// 子组件
defineExpose({
  childMethod() {
    // 暴露给父组件的方法
  }
})

6. EventBus（事件总线）

// 创建事件总线
import { createApp } from 'vue'
const eventBus = createApp({}).config.globalProperties.$bus

// 发送事件
eventBus.emit('customEvent', data)

// 监听事件
eventBus.on('customEvent', handler)

7. Pinia/Vuex（状态管理）

// store定义
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 组件中使用
import { useMainStore } from '@/stores/main'
const store = useMainStore()
store.increment()

8. Teleport（传送门）

// 将组件内容传送到DOM指定位置
<Teleport to="body">
  <ModalComponent />
</Teleport>

这些通信方式可以根据具体场景选择使用，建议优先使用 props/emits 进行父子组件通信，复杂状态管理使用 Pinia。