Vue.js 导入vue模板片段将导致[Object Promise]

我正在尝试将另一个文件中的模板片段动态地包含到我的SFC模板中，但在我希望标记出现的地方，我只得到

[Object Promise]

。我理解这是因为

import（…）

返回了一个承诺，但我一辈子都不知道如何解决它。我试着简单地将其放入模板中，并尝试在函数中解析它（

import（…）。然后（（t）=>t）

）。没什么区别。下面是最简单的例子

@/components/DynamicTemplateImport.vue

：

{{import（`@/templates/${filename}.vue`）}
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
导出默认类DynamicTemplateImport扩展Vue{
模板=['Foo'，'Bar'，'Baz']；
}

@/templates/Foo.vue

：

福

您可以创建3个组件“Foo”、“Bar”和“Baz”，然后使用

：

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

导出默认值{
计算：{
myDynamicComponent（）{
如果（//Foo需要）{
return（）=>import（'@/components/Foo'）；
}else如果（//需要条）{
return（）=>import（'@/components/Bar'）；
}如果（//Baz需要，则为else）{
return（）=>import（'@/components/Baz'）；
}
},
},
};

您可以创建3个组件“Foo”、“Bar”和“Baz”，然后使用

：

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

导出默认值{
计算：{
myDynamicComponent（）{
如果（//Foo需要）{
return（）=>import（'@/components/Foo'）；
}else如果（//需要条）{
return（）=>import（'@/components/Bar'）；
}如果（//Baz需要，则为else）{
return（）=>import（'@/components/Baz'）；
}
},
},
};

导出默认值{
名称：“应用程序”，
数据（）{
返回{
公司：[“Foo”、“Bar”、“Baz”]，
};
},
方法：{
getComponent（名称）{
return（）=>import（`./components/${name}.vue`）；
},
},
};

导出默认值{
名称：“应用程序”，
数据（）{
返回{
公司：[“Foo”、“Bar”、“Baz”]，
};
},
方法：{
getComponent（名称）{
return（）=>import（`./components/${name}.vue`）；
},
},
};

问题是我需要所有组件-注意它们在一个循环中-我特别希望避免将所有子组件硬编码到我的SFC中。（模板的

变量只是一个占位符，我真正的组件是数据驱动的。）@kthy您可以这样做。事实上，我相信只要
就可以做得更短，无需创建包装器组件，但这在codesandbox上不起作用。问题是我需要所有组件-注意它们在一个循环中-我特别希望避免将所有子组件硬编码到我的SFC中。（模板的
变量只是一个占位符，我真正的组件是数据驱动的。）@kthy您可以这样做。实际上，我相信只要
就可以做得更短，无需创建包装器组件，但这在codesandbox上不起作用。