Quasar 2/Vue 3父布局如何调用router-view内子组件方法

你的写法有四个直接触发错误的问题：

1. <script setup>语法糖没有this上下文，用this.$refs拿引用从根上就不成立，这是组合式API和选项式API的核心差异之一
2. 你从vue里导入的refs是不存在的API，Vue3根本没导出这个内容
3. <script setup>里的变量、方法默认是组件内部私有的，父组件就算拿到子组件实例，不做暴露也访问不到内部方法
4. 直接给<router-view>绑ref，拿到的默认是RouterView本身的实例，不是它渲染出来的页面组件，就算其他写对了也找不到debugg方法

1. 修改子组件 Quiz.vue #

用defineExpose编译器宏，把需要给父组件调用的debugg方法显式暴露出去：

<template>
  <!-- 原有模板内容保持不动 -->
</template>
<script setup>
const debugg = () => {
  console.log("function called");
};
// 暴露指定方法给父组件访问
defineExpose({
  debugg
})
</script>

2. 修改父布局 QuizLayout.vue #

移除无效导入，通过<router-view>的默认插槽拿到实际渲染的路由页面组件，给动态组件绑定ref，避免拿到RouterView实例，调用时直接访问ref变量上的暴露方法即可：

<template>
  <q-page-container>
    <!-- 通过v-slot获取当前路由匹配到的实际页面组件 -->
    <router-view v-slot="{ Component }">
      <component :is="Component" ref="view" />
    </router-view>
  </q-page-container>
</template>
<script setup>
// 移除不存在的refs、未使用的toRefs导入
import { ref, onMounted } from "vue";
// 声明和template上ref属性同名的变量，存储子组件实例
const view = ref(null);

const klik = () => {
  // 做空值判断，组件未挂载/路由切换时view.value为null，直接调用会报错
  if (view.value?.debugg) {
    view.value.debugg();
  }
};

// 所有ref操作要等组件挂载完成后再执行，初始阶段ref值为null
onMounted(() => {
  // 挂载完成后的测试调用可以写在这里
  // klik()
})
</script>

• 用<script setup>时彻底丢掉this的开发思路，模板引用直接声明同名ref变量访问即可，不需要走$refs
• 只要是父组件需要访问的子组件内部属性、方法，必须用defineExpose显式暴露，这是语法糖默认的封装设计，避免父组件随意篡改子组件内部状态
• 如果把klik绑定到按钮点击这类用户交互事件上，可以不用额外写onMounted判断，用户触发事件时组件必然已经挂载完成
• 不要保留未使用的导入，多余的无效导入在构建时会触发警告，也会增加不必要的打包体积

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