Vue如何實(shí)現(xiàn)遞歸組件

本文小編為大家詳細(xì)介紹“Vue如何實(shí)現(xiàn)遞歸組件”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue如何實(shí)現(xiàn)遞歸組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、遞歸組件是什么？

字面理解為層層遞進(jìn)最后歸并到一起，它的特點(diǎn)就是層級(jí)分明。

例如餓了么組件庫(kù)的樹(shù)組件就是一個(gè)遞歸。

二、Vue實(shí)現(xiàn)遞歸的核心思路

1、循環(huán)出一級(jí)類(lèi)別

2、判斷如果有多級(jí)，再調(diào)用自身。

三、代碼示例

1.父級(jí)

代碼如下（示例）：

<template>
  <div>
    <!-- 遞歸組件 -->
    <Recursion :list="list" />  list為獲取數(shù)據(jù)，傳入子頁(yè)面
  </div>
</template>

<script>
import Recursion from "./recursion.vue";

export default {
  name: "index-Recursion",
  components: {
    Recursion,
  },
};
</script>

2.子級(jí)

代碼如下（示例）：

<template>
  <div>
    <div class="item">
      <div>
          <ul>
            <li v-for="(l, id) of list" :key="id">
              {{ l.name }}
              <ul  v-if="l.chidren"> // 核心代碼1
                <li>
                    <index-chird :list="l.chidren" /> // 核心代碼2
                </li>
              </ul>
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-chird", // 自身組件
  props: {
    list: Array,
  },
  data() {
    return {
      list: [],
    };
  },

  watch: {
    list(newData) {
      this.list = newData;
    },
  },
  
};
</script>

<style  scoped>
.item {
  margin: 0 auto;
}
</style>

此處使用監(jiān)聽(tīng)器監(jiān)聽(tīng)數(shù)據(jù)變化，如果正常發(fā)請(qǐng)求傳遞數(shù)據(jù)不需要監(jiān)聽(tīng)，如果報(bào)出沒(méi)有拿到數(shù)據(jù)的錯(cuò)誤可使用監(jiān)聽(tīng)器。

3、實(shí)現(xiàn)效果

補(bǔ)充：遞歸組件的應(yīng)用場(chǎng)景

除了上述的樹(shù)形視圖外，評(píng)論也是一個(gè)不錯(cuò)的應(yīng)用場(chǎng)景，比如網(wǎng)易新聞的評(píng)論回復(fù)功能?；蛘咭粋€(gè)包含父任務(wù)和多級(jí)子任務(wù)的todolist，總之，遞歸組件適合那些在UI上有父子關(guān)系的場(chǎng)景。

寫(xiě)一個(gè)遞歸組件

其實(shí)，有一點(diǎn)也是在實(shí)現(xiàn)遞歸組件要注意的，就是要防止無(wú)限遞歸，造成調(diào)用棧溢出。上面說(shuō)的子子孫孫，無(wú)窮盡也，說(shuō)說(shuō)可以，可是瀏覽器受不了啊。這就要根據(jù)實(shí)際場(chǎng)景來(lái)分析遞歸的終止條件。接下來(lái)，我們來(lái)寫(xiě)一個(gè)遞歸組件。

上面的demo實(shí)現(xiàn)了一個(gè)模擬dom事件冒泡的操作，當(dāng)點(diǎn)擊中心圓時(shí)，事件逐級(jí)傳遞，然后改變div的顏色，直到冒泡到最頂層。這里根據(jù)設(shè)置圓的數(shù)量進(jìn)行遞歸，遞歸的終止條件是直到數(shù)量減到1：

<template>
...
    <colorful-circle 
         v-if="count > 1" // 控制遞歸條件
         :count="count - 1" // 每向下一層，count減1
         @colorChange="handleColor" 
    ></colorful-circle>
...
</template>

遞歸組件在事件監(jiān)聽(tīng)上也是一個(gè)有意思的地方，你可以一層一層接力，直到將事件冒泡到最頂層。代碼片段如下：

<template>
...
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor" // 監(jiān)聽(tīng)子colorful-circle組件發(fā)出的事件
    ></colorful-circle>
...
</template>
 
<script>
name: 'colorful-circle',
...
methods: {
...
    handleColor(c) {
      this.color = Color(c).darkenByAmount( .05 ); // 在本層組件改變顏色
      setTimeout(() => {
        this.$emit('colorChange', this.color); // 把事件再冒泡到上一層組件
      },100)
    },
}
...
</script>

讀到這里，這篇“Vue如何實(shí)現(xiàn)遞歸組件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。