35.Vue 递归组件

在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>