当前位置：首页 > news >正文

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

news 来源：原创 2025/5/8 21:39:15

在 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>