在Vue中动态添加不同的组件

Question

我想用Vue创建一个简单的表单生成器，其中用户单击菜单上的按钮以将不同的表单字段添加到表单。我知道，如果仅要添加一种类型的表单字段，我可以使用类似以下方法（https://jsfiddle.net/u6j1uc3u/32/）来完成：

<div id="app">
  <form-input v-for="field in fields"></form-input>

  <button type="button" v-on:click="addFormElement()">Add Form Element</button>
</div>

<script type="x-template" id="form-input">
  <div>
    <label>Text</label>
    <input type="text" />
  </div>
</script>

和：

Vue.component('form-input', {
  template: '#form-input'
});

new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0
  },

  methods: {
    addFormElement: function() {
      this.fields.push({type: 'text', placeholder: 'Textbox ' + (++this.count)});
    }
  }
})

但是，如果表单字段的类型不只一种（输入，文件，选择等），该怎么办？我当时在想可能为每种类型构建一个不同的组件，但是那我将如何在单个表单元素列表中显示多种类型的组件呢？

我是否可以根据fields数组中的数据创建一个具有不同类型子组件的组件？

还是有更好的方法来解决我所缺少的这种情况？我刚刚开始学习Vue，因此对您的帮助表示感谢！

Answer 1

好的，所以我研究了动态元素并设法将其整合在一起：

Vue.component('form-input', {
  template: '#form-input'
});

Vue.component('form-select', {
  template: '#form-select'
});

Vue.component('form-textarea', {
  template: '#form-textarea'
});

new Vue({
  el: '#app',
  data: {
    fields: [],
    count: 0
  },

  methods: {
    addFormElement: function(type) {
      this.fields.push({
        'type': type,
        id: this.count++
      });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
  <component v-for="field in fields" v-bind:is="field.type" :key="field.id"></component>

  <button type="button" v-on:click="addFormElement('form-input')">Add Textbox</button>
  <button type="button" v-on:click="addFormElement('form-select')">Add Select</button>
  <button type="button" v-on:click="addFormElement('form-textarea')">Add Textarea</button>
</div>

<script type="x-template" id="form-input">
  <div>
    <label>Text</label>
    <input type="text" />
  </div>
</script>

<script type="x-template" id="form-select">
  <div>
    <label>Select</label>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</script>

<script type="x-template" id="form-textarea">
  <div>
    <label>Textarea</label>
    <textarea></textarea>
  </div>
</script>

因此，我没有form-input为fields数组中的每个项目创建一个新组件，而是component通过type字段的属性创建一个与正确组件关联的新组件