导入vue模板片段会导致[Object Promise]

Question

我试图动态地将模板片段从另一个文件包含到我的SFC模板中，但是我希望标记出现的地方我只得到[Object Promise]。我明白这是因为import(…)返回一个承诺，但我不能为我的生活弄清楚如何解决它。我试过简单地把它放在模板中，我试过在一个函数(import(…).then((t) => t))中解决它。没有什么区别。下面是一个简单的例子。

@/components/DynamicTemplateImport.vue:

<template>
<div>
<div
v-for="(filename, idx) of templates"
v-bind:key="idx"
>
{{ import(`@/templates/${filename}.vue`) }}
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class DynamicTemplateImport extends Vue {
templates = ['Foo', 'Bar', 'Baz'];
}
</script>

@/templates/Foo.vue:

<template>
<p>Foo</p>
</template>

Answer 1

<template>
<div id="app">
<component v-for="(c, i) in comp" :is="getComponent(c)" :key="i" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
comp: ["Foo", "Bar", "Baz"],
};
},
methods: {
getComponent(name) {
return () => import(`./components/${name}.vue`);
},
},
};
</script>

Answer 2

你可以创建3个组件'Foo'， 'Bar'和'Baz'，然后使用<component :is="myDynamicComponent"></component>:

<template>
<div>
<component :is="myDynamicComponent"></component>
</div>
</template>
<script>
export default {
computed: {
myDynamicComponent() {
if (// Foo wanted) {
return () => import('@/components/Foo');
} else if (// Bar wanted) {
return () => import('@/components/Bar');
} else if (// Baz wanted) {
return () => import('@/components/Baz');
}
},
},
};
</script>