3

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

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

按照这篇文章的建议，我的 Vue 2 应用程序运行良好：

[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] 路由器.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 访问在路由器视图中加载的子组件实例？

对此的任何帮助将不胜感激。

4

1 回答 1

7

Vue Router 4<router-view>将渲染的视图组件暴露在一个可以用 渲染的v-slot道具<component>中，您可以在其中应用模板 ref：

<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>

演示

于 2021-04-12T23:05:07.523 回答