Vue3后代传祖先组件通讯方法

在 Vue3 中，后代组件向祖先组件通信可以通过以下几种方式实现：

方式一：Provide/Inject + 函数传递（推荐）

vue

<!-- 祖先组件 -->
<script setup>
import { provide } from 'vue'

const handleChildMsg = (msg) => {
  console.log('收到后代消息:', msg)
}

// 提供函数给后代
provide('sendToAncestor', handleChildMsg)
</script>

<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'

// 注入祖先提供的函数
const send = inject('sendToAncestor')

const sendMessage = () => {
  send('来自后代的消息')
}
</script>

方式二：自定义事件总线

javascript

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

vue

复制

<!-- 祖先组件 -->
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { emitter } from './eventBus'

const handleEvent = (msg) => {
  console.log('收到消息:', msg)
}

onMounted(() => {
  emitter.on('child-message', handleEvent)
})

onUnmounted(() => {
  emitter.off('child-message', handleEvent)
})
</script>

<!-- 后代组件 -->
<script setup>
import { emitter } from './eventBus'

const emitToAncestor = () => {
  emitter.emit('child-message', '后代发送的消息')
}
</script>

方式三：Vuex/Pinia 状态管理

javascript

// store.js
import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    messageFromDescendant: null
  }),
  actions: {
    setMessage(msg) {
      this.messageFromDescendant = msg
    }
  }
})

vue

<!-- 祖先组件 -->
<script setup>
import { useMainStore } from './store'
import { watch } from 'vue'

const store = useMainStore()

watch(
  () => store.messageFromDescendant,
  (newVal) => {
    console.log('收到消息:', newVal)
  }
)
</script>

<!-- 后代组件 -->
<script setup>
import { useMainStore } from './store'

const store = useMainStore()

const sendMessage = () => {
  store.setMessage('后代发送的消息')
}
</script>

方式四：模板引用（多层组件时）

vue

<!-- 祖先组件 -->
<script setup>
import { ref } from 'vue'

const lastChildRef = ref(null)

const handleChildMsg = (msg) => {
  console.log('收到消息:', msg)
}

// 通过 expose 暴露方法
defineExpose({ handleChildMsg })
</script>

<template>
  <ParentComponent>
    <ChildComponent ref="lastChildRef" />
  </ParentComponent>
</template>

最佳实践选择：

1. 简单通信：优先使用 provide/inject

2. 跨组件通信：推荐使用事件总线

3. 复杂状态管理：使用 Pinia/Vuex

4. 直接组件引用：模板引用 + expose

注意：provide/inject 需要确保在组件树中存在提供者，事件总线要注意及时移除监听避免内存泄漏，状态管理适用于需要持久化或共享的数据。