递归组件 组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

name: 'unique-name-of-my-component' 当你使用 Vue.component 全局注册一个组件时，这个全局的
ID 会自动设置为该组件的 name 选项。

Vue.component('unique-name-of-my-component', { // ... })
稍有不慎，递归组件就可能导致无限循环：

name: 'stack-overflow', template:
'<div><stack-overflow></stack-overflow></div>' 类似上述的组件将会导致“max stack
size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。

demo.vue

    <template>
      <div>
        <div v-for="(v,i) in data" :key="i" :index="i" style="padding-left: 1em;">
          -{{ v.text }}
          <template v-if="v.sub">
            <Demo :data="v.sub"/>
          </template>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo",
      props: {
        data: {
          type: Array,
          required: true,
          default: () => []
        }
      },
      created() {
        console.log(this.data.sub)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

index.vue

<template>
<div>
      <Demo :data="demo"/>
</div>
</template>
<script>
export default{
  data() {
    return {
      demo: [{
        text: '1-1',
        sub: [
          {
            text: '2-1',
            sub: [
              {
                text: '3-1',
                sub: []
              },
              {
                text: '3-2',
                sub: []
              }
            ]
          },
          {
            text: '2-2',
            sub: []
          }
        ]
      }]
    }
  }
}
</script>

效果图