在Vue中组件可以在模板内部递归调用自己，需要给组件设置name值，需要注意的是：必须限定条件，不能无限递归，否则会内存溢出（Error in nextTick: "RangeError: Maximum call stack size exceeded"）。
效果
image.png
案例：
index.vue
<template>
<div>
<!-- 使用子组件 -->
<subcmp :Counter="1"></subcmp>
</div>
</template>
<script>
// 导入子组件
import subcmp from './subcmp'
export default {
// 注册
components: {
subcmp
},
data(){
return {}
}
}
</script>
subcmp.vue
<template>
<div>
子组件，当前Counter值： {{Counter}} <br/>
<!-- 递归调用自身,如果Counter大于10则停止递归调用 -->
<subcmps:Counter="Counter + 1" v-if="Counter < 10"></subcmps>
</div>
</template>
<script>
export default {
// 必须定义name，组件内部才能递归调用
name: 'subcmps',
data(){
return {}
},
// 接收外部传入的值
props: {
Counter: {
default: 1
}
}
}
</script>
