Vue 3 - 访问路由器视图实例以调用子方法

Question

我正在尝试将 Vue 2.x 应用程序迁移到 Vue 3.x。不幸的是，在过去的两天里，我一直在努力寻找解决这个简单问题的有效方法：

我的应用程序适用于移动设备，在屏幕顶部，我有一个顶栏，左右各有 2 个上下文按钮。这些按钮触发与在我的 <router-view/> 中加载并托管在其中的视图相关的方法。

我的 Vue 2 应用程序按照 this post 的建议运行得非常好：

[Vue 2]App.vue

<template>
    <app-bar>
        <bar-btn @click="$refs.routerView[$route.meta.leftBtn.methodName]($route.meta.leftBtn.arguments)">Left btn</bar-btn>
        <div>View title</div>
        <bar-btn @click="$refs.routerView[$route.meta.rightBtn.methodName]($route.meta.rightBtn.arguments)">Right btn</bar-btn>
    </app-bar>
    <main>
        <router-view ref="routerView"/>
    </main>
</template>

存储在我的路由元数据中的方法名称和可选参数：

[Vue 2]Router.js

{
    name: 'View 1',
    path: '/',
    component: MyView1,
    meta: {
        requiresAuth: false,
        leftBtn:  { methodName: 'showLeftDialog',  arguments: 'myArgument' }
        rightBtn: { methodName: 'showRightDialog', arguments: 'myArgument' }
    },
},

在 Vue 2 中，我可以通过以下方式访问路由器视图实例：this.$refs.routerView

不幸的是，它不再适用于 Vue 3！

花了很多时间后，我还没有找到正确的方法来访问我的 <router-view/> 中加载的子实例以触发我在其中托管的方法。

[Vue 3] 这不起作用：

Does not work:
this.$refs.routerView[this.$route.meta.leftBtn.methodName](this.$route.meta.leftBtn.arguments)

Does not work:
this.$router.currentRoute.value.matched[0].components.default.methods[this.$route.meta.leftBtn.methodName](this.$route.meta.leftBtn.arguments)

Does not work:
this.$refs.routerView.$refs    => this is an empty object

简而言之，我如何才能访问使用 Vue 3 加载到路由器视图中的子组件实例？

如有任何帮助，我们将不胜感激。

Answer 1

Vue Router 4 的 <router-view> 在 v-slot prop 中公开呈现的视图组件，可以使用 <component> 呈现，您可以向其应用模板参考：

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

然后组件的方法可以通过$refs.view.$.ctx访问：

<bar-btn @click="$refs.view.$.ctx[$route.meta.leftBtn.methodName]($route.meta.leftBtn.arguments)">Left btn</bar-btn>
<bar-btn @click="$refs.view.$.ctx[$route.meta.rightBtn.methodName]($route.meta.rightBtn.arguments)">Right btn</bar-btn>

demo

Vue 3 - 访问路由器视图实例以调用子方法

Vue 3 - Get access to router-view instance in order to call child methods

vue.js

vue-router

vuejs3

vue-router4