Javascript 如何从Vue.js中的变量名加载组件？

我想从vue.js应用程序中的动态变量名加载组件

我已注册以下组件：

<template id="goal">
  <h1>Goal:{{data.text}}</h1>
</template>

目标：{data.text}

而不是像这样加载它

<goal></goal>

我想从一个变量名加载，如下所示：

<{{mytemplate.type}}></{{mytemplate.type}}>

当然，其中mytemplate.type将是，在本例中等于“goal”

使用如下的

<{{mytemplate.type}}></{{mytemplate.type}}>

---

我也遇到了同样的问题，因为我使用的是Vue 3。经过一些研究，我发现在VUE3中定义动态组件（异步组件）的过程有点不同。 我希望这段代码能帮助别人

<template>
    <component :is="comp"></component>
</template>

<script>
//Vue 3 is having a special function to define these async functions
import {defineAsyncComponent} from "vue";

export default {
 name: "DynamicComponent",
 //I am passing the name of the Component as a prop
 props: {
     componentName:{
         type: String,
         required: true
     }
 },
 computed: {
  comp () {
      return defineAsyncComponent(() => import(`@/components/${this.componentName}.vue`))
  }
}
}
</script>

//Vue 3有一个特殊的函数来定义这些异步函数
从“vue”导入{defineAsyncComponent}；
导出默认值{
名称：“DynamicComponent”，
//我将组件的名称作为道具传递
道具：{
组件名称：{
类型：字符串，
必填项：true
}
},
计算：{
公司（）{
返回defineAsyncComponent（（）=>import（`@/components/${this.componentName}.vue`）
}
}
}