vue组件可以自己复制自己么？

Question

需求的话是这样的 右边的封装成组件 点击+ 可以无限制复制 自己 到右边

我在组件中引用了自己 但是会报错 怎么解决？

组件是这样的：

<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就是这个组件本身 
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>

Answer 1

vue的组件操作应该是这样：

1、写好一个vue组件
2、import引入组件
3、components里注册组件
4、使用组件

你的需求是复制DOM结构，而不是复制vue组件。
根据你的代码，我给你提供个思路，动态循环组件：

template

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

  </div>
 
</template>

methods

data () {
    return {tempArr: [] // 随便填数据，占个位就行了}
}，
methods: {
    addTemp () {
        this.tempArr.push('')  // 随便添加一个数据，让数组长度+1，dom自然多一组了
    }

}

Answer 2

直接添加组件标签就行了啊 <main-theme></main-theme>

Answer 3

components中注册组件了吗？

components: {aComponent}

Answer 4

你可以搜一下递归组件，其实name就是用来引用自己的

Answer 5

递归组件 ，使用name命名此组件一样的名字，然后直接在此组件里面引入