Question

我正在尝试将另一个文件中的模板片段动态包含到我的 SFC 模板中，但是在我希望标记出现的地方我只得到 [Object Promise]。我明白这是因为 import(…) 返回一个 Promise，但我终生无法弄清楚如何解决它。我试过简单地将它放在模板中，并尝试在函数 (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

您可以创建 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>

Answer 2

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

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

2 个答案: