vue递归组件

今天在阅读vue文档的时候，发现还有一个递归组件，平时没有注意到。递归组件就是在自己组件的模板中调用自己，此时组件的name属性就尤为重要了。
稍有不慎，递归组件就可能导致无限循环，将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
举个例子：假如要将下列数据的name渲染出来，那么就可以使用递归组件完成

list: [
  {
    name: "海贼王",
    children: [
      {
        name: "卡普",
        children: [
          { 
            name: "龙", 
            children: [
              { 
                name: '路飞' 
              }
            ] 
          }
        ],
      },
     ],
   },
  ],

然后我们创建一个名为recursion.vue的组件

<template>
  <div>
    <div class="list" v-for="(item, index) in list" :key="index">
      <p>{{ item.name }}</p>
      /* 这是在组件的内部，这个组件的名字必须与下面的name属性的名字一致，首字母大小写都可以 */
      <recursion :list="item.children"></recursion>
    </div>
  </div>
</template>
<script>
export default {
  name: "recursion",
  props: {
    list: Array,
  },
};
</script>

<style scoped>
.list{
  text-align: center;
}
</style>

然后使用组件，

<template>
  <div>
    <Recursion :list="list"></Recursion>
  </div>
</template>

<script>
// 这里导入的时候命名和recursion.vue内部的name属性是不冲突的，可以自由命名
import Recursion from "../components/recursion.vue";

export default {
  components: {
    Recursion,
  },
  data() {
    return {
      list: [
        {
          name: "海贼王",
          children: [
            {
              name: "卡普",
              children: [{ name: "龙", children: [{ name: '路飞' }] }],
            },
          ],
        },
      ],
    };
  },
};
</script>

递归组件.png

符合预期，控制无报错