今天在閱讀vue文檔的時(shí)候，發(fā)現(xiàn)還有一個(gè)遞歸組件，平時(shí)沒有注意到。遞歸組件就是在自己組件的模板中調(diào)用自己，此時(shí)組件的name屬性就尤為重要了。
稍有不慎，遞歸組件就可能導(dǎo)致無限循環(huán)，將會(huì)導(dǎo)致“max stack size exceeded”錯(cuò)誤，所以請(qǐng)確保遞歸調(diào)用是條件性的 (例如使用一個(gè)最終會(huì)得到 false 的 v-if)。
舉個(gè)例子：假如要將下列數(shù)據(jù)的name渲染出來，那么就可以使用遞歸組件完成

list: [
  {
    name: "海賊王",
    children: [
      {
        name: "卡普",
        children: [
          { 
            name: "龍", 
            children: [
              { 
                name: '路飛' 
              }
            ] 
          }
        ],
      },
     ],
   },
  ],

然后我們創(chuàng)建一個(gè)名為recursion.vue的組件

<template>
  <div>
    <div class="list" v-for="(item, index) in list" :key="index">
      <p>{{ item.name }}</p>
      /* 這是在組件的內(nèi)部，這個(gè)組件的名字必須與下面的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>
// 這里導(dǎo)入的時(shí)候命名和recursion.vue內(nèi)部的name屬性是不沖突的，可以自由命名
import Recursion from "../components/recursion.vue";

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

遞歸組件.png

符合預(yù)期，控制無報(bào)錯(cuò)