vue 3 call child method in router-view答案

【问题标题】：vue 3 call child method in router-viewvue 3 call child method in router-view
【发布时间】：2022-11-09 11:27:48
【问题描述】：

I'm using quasar 2/vue 3, and I try to call child method from parent layout, how do I achieve this?

app.vue

<template>
  <router-view />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

routes.js

const routes = [
  {
    path: "/Quiz",
    component: () => import("layouts/QuizLayout.vue"),
    children: [{ path: "", component: () => import("src/pages/Quiz.vue") }],
    meta: { requireAuth: false },
  },
]

QuizLayout.vue

<template>
      <q-page-container>
      <router-view ref="view" />
    </q-page-container>
</template>
<script setup>
import { ref, onMounted, toRefs, refs } from "vue";
const klik = () => {
  this.$refs.view.debugg();
};
</script>

Quiz.vue

<template>
  ...
</template>
<script setup>
const debugg = () => {
  console.log("function called");
};
</script>

I try to call debugg() from QuizLayout, I try this.$refs.view.debugg(); but its give error $refs is not defined, how can I achieve this?

You should wait until the child is mounted - and then use the $refs. Also, make sure that the current route is actually the route that renders Quiz.vue - VueRouter does not automatically navigate to a child route.

标签： vuejs3 quasar-framework quasar

【解决方案1】：

You could try:

<router-view v-slot="{ Component }"> <component ref="view" :is="Component" /> </router-view>

If you use , at Child Component, remember to expose the used method, according to https://vuejs.org/guide/essentials/template-refs.html#ref-on-component