Vue3中父组件Base.vue如何触发router-view内嵌子组件setup内的方法

推荐方案：provide + inject 回调注册 #

这是最贴合你需求的实现方式，完全不需要依赖vuex，方法内部的refs、谷歌地图实例都可以正常访问，无需额外处理。

实现步骤 #

1. 在Base.vue中提供注册函数，存储目标组件传过来的方法

<!-- Base.vue 示例代码 -->
<script setup>
import { provide, ref } from 'vue'

// 存储目标组件的可调用方法
const targetMethod = ref(null)

// 向所有后代组件暴露注册方法
provide('registerMapMethod', (method) => {
  targetMethod.value = method
})

// 菜单项点击触发逻辑
const onMenuItemClick = () => {
  targetMethod.value?.()
}
</script>

<template>
  <!-- 你的菜单项 -->
  <div class="menu-item" @click="onMenuItemClick">触发地图方法</div>
  <router-view />
</template>

2. 在目标组件中注入注册函数，挂载时将自身方法注册上去

<!-- 目标组件 示例代码 -->
<script setup>
import { inject, onBeforeUnmount } from 'vue'

const registerMethod = inject('registerMapMethod')
// 你的业务方法，可正常访问内部refs、谷歌地图实例
const mapRelatedMethod = () => {
  console.log('方法被Base触发', mapRef.value, googleMapInstance)
}

// 组件挂载完成后注册方法
registerMethod(mapRelatedMethod)

// 组件卸载时清空，避免内存泄漏
onBeforeUnmount(() => {
  registerMethod(null)
})
</script>

方案优势 #

• 无额外依赖，使用Vue3原生API实现
• 无需透传props，不受中间业务组件层级限制
• 方法定义在目标组件内部，所有内部状态、实例、refs都可以正常访问

备选方案：轻量事件总线 #

如果更偏好事件触发模式，可以自己实现一个极简的事件总线，不需要引入第三方库：

1. 定义全局事件总线

// eventBus.js
export default {
  events: Object.create(null),
  on(eventName, handler) {
    (this.events[eventName] || (this.events[eventName] = [])).push(handler)
  },
  emit(eventName, ...payload) {
    this.events[eventName]?.forEach(handler => handler(...payload))
  },
  off(eventName, handler) {
    if (!this.events[eventName]) return
    this.events[eventName] = this.events[eventName].filter(item => item !== handler)
  }
}

2. Base.vue菜单项点击时派发事件

// Base.vue 逻辑
import eventBus from './eventBus.js'
const onMenuItemClick = () => {
  eventBus.emit('triggerMapMethod')
}

3. 目标组件监听事件

// 目标组件 逻辑
import eventBus from './eventBus.js'
import { onBeforeUnmount } from 'vue'

const mapRelatedMethod = () => {
  // 你的业务逻辑
}
eventBus.on('triggerMapMethod', mapRelatedMethod)

onBeforeUnmount(() => {
  eventBus.off('triggerMapMethod', mapRelatedMethod)
})

注意事项 #

• 无论采用哪种方案，都必须在目标组件卸载时清空注册的方法/解绑事件，避免内存泄漏和路由切换后的无效调用
• 如果存在多个路由下的同类目标组件，可以在注册/事件名中加入路由标识做区分，避免调用错误

内容的提问来源于stack exchange，提问作者Dave