Vue如何實現遞歸組件

本文小編為大家詳細介紹“Vue如何實現遞歸組件”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue如何實現遞歸組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、遞歸組件是什么？

字面理解為層層遞進最后歸并到一起，它的特點就是層級分明。

例如餓了么組件庫的樹組件就是一個遞歸。

二、Vue實現遞歸的核心思路

1、循環出一級類別

2、判斷如果有多級，再調用自身。

三、代碼示例

1.父級

代碼如下（示例）：

<template>
  <div>
    <!-- 遞歸組件 -->
    <Recursion :list="list" />  list為獲取數據，傳入子頁面
  </div>
</template>

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

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

2.子級

代碼如下（示例）：

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

此處使用監聽器監聽數據變化，如果正常發請求傳遞數據不需要監聽，如果報出沒有拿到數據的錯誤可使用監聽器。

3、實現效果

補充：遞歸組件的應用場景

除了上述的樹形視圖外，評論也是一個不錯的應用場景，比如網易新聞的評論回復功能。或者一個包含父任務和多級子任務的todolist，總之，遞歸組件適合那些在UI上有父子關系的場景。

寫一個遞歸組件

其實，有一點也是在實現遞歸組件要注意的，就是要防止無限遞歸，造成調用棧溢出。上面說的子子孫孫，無窮盡也，說說可以，可是瀏覽器受不了啊。這就要根據實際場景來分析遞歸的終止條件。接下來，我們來寫一個遞歸組件。

上面的demo實現了一個模擬dom事件冒泡的操作，當點擊中心圓時，事件逐級傳遞，然后改變div的顏色，直到冒泡到最頂層。這里根據設置圓的數量進行遞歸，遞歸的終止條件是直到數量減到1：

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

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

<template>
...
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor" // 監聽子colorful-circle組件發出的事件
    ></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如何實現遞歸組件”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。