javascript - 如何以编程方式间接创建 Vue 组件

Question

我正在尝试以编程方式将组件添加到我的 Vue 单文件组件中的页面，如果您提前知道自己想做什么，它会很好地工作。在我的例子中，组件及其布局将通过 JSON 接收，我正在尝试动态创建它们。下面你可以看到我想做类似 eval 的事情，但不幸的是，这不适用于未实例化的对象。下面的代码使用硬编码值进行了简化，以表达观点。

<template>
  <div id="app">
    <h2>Static template:</h2>
    <InputTemplate type="text"></InputTemplate>
    <h2>Dynamically inserted:</h2>
    <div ref="container">
      <button @click="onClick">Click to insert</button>
      <br/>
    </div>
  </div>
</template>  

<script>
import Vue from 'vue'
//the component I'd like to create
import InputTemplate from './components/InputTemplate.vue'

export default {
  name: 'app',
  components: { InputTemplate },
  methods: {
    onClick() {
      //I'd like to do something like this, but eval doesn't work like this
      var ComponentClass = Vue.extend(eval('InputTemplate'))
      var instance = new ComponentClass({
        propsData: {type: 'text' }
      })
      instance.$mount()
      this.$refs.container.appendChild(instance.$el)
    }
  }
}
</script>

我在下面组合了一个辅助函数来代替 eval 并且可以工作，但感觉这个解决方案有点不雅观。对于添加的每个新组件，它还需要大量维护。有更好的方法吗？

returnComponent(componentString){
      if(componentString === 'InputTemplate'){
        return InputTemplate;
      }
    }

Answer 1

原来Vue有<component :is="yourComponentType">如果你把它扔进 v-for 中，这正是我希望完成的环形。 Documents here.