vue3 在App.vue里调用RouterView里页面组件的方法

在Vue 3中，如果你想从App.vue里调用嵌套在RouterView里的组件的方法，你可以使用provide和inject来实现跨组件通信，或者使用setup函数内的ref和onMounted生命周期钩子来访问子组件的方法。

以下是使用ref和onMounted的示例：

首先，确保你的子组件（嵌套在RouterView里的页面组件）导出了一个公共方法：

// 子组件ChildComponent.vue
<script setup lang="ts">
   const publicMethod = ()=> {
      // 你的方法逻辑
    }
// 暴露出你的方法
defineExpose({ publicMethod })
</script>

然后，在App.vue中，你可以这样做：

// App.vue
<template>
  <RouterView v-slot="{ Component }">
    <component :is="Component" ref="childComponentRef" />
  </RouterView>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const childComponentRef = ref(null);
 
    onMounted(() => {
      if (childComponentRef.value) {
        // 调用子组件的方法
        childComponentRef.value.publicMethod();
      }
    });
 
    return {
      childComponentRef
    };
  }
}
</script>

在上面的代码中，我们使用了ref来创建一个引用，并通过RouterView的v-slot属性访问当前渲染的组件。在onMounted生命周期钩子中，我们通过childComponentRef.value访问子组件的方法。这里假设ChildComponent是通过路由渲染的组件，并且它的方法是公开的（通过defineExpose暴露出来）。