在 Vue 3 + Vue Router 里，<RouterView /> 本质上就是一个 动态渲染子组件的插槽。如果你想让子页面调用父组件的方法，或者获取父组件的数据，有几种方式。

1 使用props 传递数据/函数

父组件

<template>
  <div>
    <h1>父组件</h1>
    <RouterView :parentMessage="message" :parentFn="handleClick" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello from parent')

const handleClick = () => {
  alert('父组件方法被调用了！')
}
</script>

子页面（通过 RouterView 渲染的组件）

<template>
  <div>
    <p>父组件消息: {{ parentMessage }}</p>
    <button @click="parentFn">调用父组件函数</button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  parentMessage: string
  parentFn: () => void
}>()
</script>

这样父组件变量和函数就可以传递给 <RouterView /> 渲染的页面了。

2 使用provide / inject（适合跨多层组件传递）

父组件

import { provide, ref } from 'vue'

const message = ref('Hello from parent')
const handleClick = () => alert('父组件函数')

provide('parentMessage', message)
provide('parentFn', handleClick)

子页面

import { inject } from 'vue'

const parentMessage = inject('parentMessage') as Ref<string>
const parentFn = inject('parentFn') as () => void

3 使用Pinia / 全局状态管理

如果你父子组件比较复杂，或者父组件不是直接父级，推荐用 Pinia（或 Vuex）存储父组件变量和函数：

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

export const useParentStore = defineStore('parent', {
  state: () => ({ message: 'Hello', counter: 0 }),
  actions: {
    handleClick() { this.counter++ }
  }
})

父组件

const store = useParentStore()

子页面

const store = useParentStore()
console.log(store.message)
store.handleClick()

总结