nuxt 中如何在 extends 的组件中动态引入组件

  • Z时代
  • 2024-02-22
  • 分类：IT

我想要实现：child 组件 extends 自 parent 组件，在 parent 组件中根据 child 中定义的 data 属性动态引入组件，实例代码如下：

pages/users.vue

<script>
import ResourcesView from '~/components/resources-view.vue';
export default {
    extends: ResourcesView,
    data() {
        return {
            resources: 'users',
        }
    },
    async asyncData({ $axios, params, query }) {
        let { data } = await $axios.get(`/users`, { params: query });
        return {
            data: data
        };
    }
}
</script>

components/resources-view.vue

<template>
    <div>
        <resources-list
            v-model="data.data"/>           
    </div>
</template>
<script>
export default {
    components: {
        ResourcesList: () => import(`./${this.resources}/list.vue`).then(c => c.default),
    }
}
</script>

报错如下：
nuxt 中如何在 extends 的组件中动态引入组件

ERROR [Vue warn]: Failed to resolve async component: () => variableDynamicImportRuntime1(./${globalThis.resources}/list.vue).then((c2) => c2.default) 05:05:40 Reason: Error: Unknown variable dynamic import: ./undefined/list.vue

然而我直接在模板中使用 resources 的话，是可以正常工作的，resources 不是 undefined。

components/resources-view.vue

<template>
    <div>
        {{ resources }}     
    </div>
</template>

我尝试了如下 2 种解决办法：

  1. 在 created 中加载组件
    然而这样会使 SSR 失效
  2. 将 components 作为回调函数

均未能解决

请问如何在 extends 的组件中动态引入组件呢？

十分感谢！

同见 StackOverflow

以上是 nuxt 中如何在 extends 的组件中动态引入组件 的全部内容， 来源链接： utcz.com/p/937272.html

回到顶部