在Vue中动态加载组件

Question

我有一个根据变量“场景”的值动态加载的组件。问题是我必须在组件下导入和加载所有可能的场景，并且我有很多不同的可能组件。 Vue是否可以仅动态导入传入的场景，还是我需要一开始就导入所有内容？

出于其他原因，在这种情况下，我宁愿不使用路由器。

docker-compose

=========

<component
  :is="scene"
  v-bind="options"
>
</component>

Answer 1

我认为您可以使用v-if来根据传递的数据加载不同的组件。

<TitleSceneComponent v-if="booleanValueOrCondition" />
<ChoiceSceneComponent v-if="anotherBooleanValueOrCondition" />

通过这种方式可以根据您的条件加载组件。

Answer 2

我会使用vue路由器执行类似以下操作：https://router.vuejs.org/guide/#html

Answer 3

您可以这样做：

<component
  :is="sceneComp"
  v-bind="options"
>
</component>

============================

computed: {
  sceneComp() {
    return () => import(`./scenes/common/${this.scene}Component.vue`);
}