vue.js - 如何在 vueJS 中创建动态组件

Question

我是 vueJS 的新手，正在尝试动态加载组件。我在网上搜索并尝试了许多建议，但仍然无法让它发挥作用。

场景：我想要一个“shell”组件，它充当容器，用于根据用户的选择换入和换出其他组件。这些组件的文件名将从数据库中提供

这是外壳组件：

    <template>
    <keep-alive>
        <component :is='compName'></component>
    </keep-alive>
</template>

<script>
    props: ['vueFile'],

    export default ({
        data() {
            compName: ()=> import('DefaultPage.vue')
        },

        watch: {
            compName() {
                return ()=> import(this.vueFile);
            }
        }

    })
</script>

这不起作用。

如果我对组件文件名进行硬编码，它可以正常工作......例如

return ()=> import('MyComponent.vue');

当我将导入语句更改为使用变量时，即使该变量包含与我硬编码的相同字符串，它也会出错。

我究竟做错了什么？

Answer 1

compName() {

     const MyComponent = () => import("~/components/MyComponent.js");
}

你可以看到这篇文章 https://vuedose.tips/dynamic-imports-in-vue-js-for-better-performance

Answer 2

尝试这个

compName () {
  return ()=> import(`./component/${this.vueFile}`);
}

import() 必须至少包含一些关于模块所在位置的信息。 https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import