Vue - 如何附加组件？

我正在尝试创建一个按钮，一旦按下该按钮，就会向我的组件添加一个子组件。我的代码可以工作，只是 HTML 被解析为字符串，这是父组件：

<template>
  <div id="app">
    <li v-for="item in items">
      {{ item.component }}
    </li>
  </div>
</template>

<script>

export default {
  props:{},
  data(){
    return { 
      items: []
    }
  },
  mounted() {},
  computed: {},
  methods: {
    addItem(){
      this.items.push({component: '<testcomponent />'})
    }
  }
}
</script>

子组件非常基本：

<template>
  <div id="app">
    <h1>Testing</h1>
  </div>
</template>

所以我的代码的问题是，每次我按下按钮时，它都会将 HTML 解析为字符串，而不是每次加载子组件的新实例：'<testcomponent />'。我怎样才能解决这个问题？提前致谢！

您可以推送组件名称，然后使用<component :is="item.component"/> in the v-for如下：

const testcomponent = Vue.component('testcomponent', {
  template: '#testcomponent',
});

new Vue({
  el:"#app",
  components: { testcomponent },
  data() { return {  items: [] } },
  methods: {
    addItem() {
      this.items.push({ component: 'testcomponent' });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="testcomponent">
  <div><h1>Testing</h1></div>
</template>

<div id="app">
  <button @click="addItem">Add</button>
  <li v-for="item in items">
    <component :is="item.component"/>
  </li>
</div>