vue組件可以自己復(fù)制自己么？

需求的話是這樣的 右邊的封裝成組件 點(diǎn)擊+ 可以無限制復(fù)制 自己 到右邊

我在組件中引用了自己 但是會(huì)報(bào)錯(cuò) 怎么解決？

組件是這樣的：

<template>
  <div class="c1" >
     <input type="text">
     <i class="el-icon-circle-plus" @click="add('a-component')" ></i>
     <ul class="main-pic">
        <li :is="item.component"  v-for="item in allComponents"></li>
     </ul>

  </div>
 
</template>

<script>
// component1就是這個(gè)組件本身 
import AComponent from './component1.vue'
export default {
  name: 'Node',
  components: {
    'a-component': AComponent,
  },
  data () {
    return {
      allComponents: [],
    }
  },
  methods: {
      add(component) {
        this.allComponents.push({
          'component': component,
            })
        }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.domDiv{
  height: 20px;
  width: 400px;
}

input{
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100px;
}

.el-icon-circle-plus{
  color: green;
}

.c1{
  height: 50px;
  width: 200px;
}

</style>