前言

在我們開發(fā)過程中，為了提高開發(fā)效率，降低開發(fā)難度，我們會直接使用組件庫來實(shí)現(xiàn)，同時也衍生出了很多優(yōu)秀的組件庫，如：餓了么、螞蟻、Iview、vant等等。但是有時這些組件庫提供給我們的組件不滿足我們的需求或者定制組件時成本太高，那么我們就要手動實(shí)現(xiàn)了。

一、遞歸組件是什么？

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

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

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

1、循環(huán)出一級類別

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

三、代碼示例

1.父級

代碼如下（示例）：

<template>
  <div>
    <!-- 遞歸組件 -->
    <Recursion :list="list" />  list為獲取數(shù)據(jù)，傳入子頁面
  </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 style="padding-left: 20px" 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)聽器監(jiān)聽數(shù)據(jù)變化，如果正常發(fā)請求傳遞數(shù)據(jù)不需要監(jiān)聽，如果報出沒有拿到數(shù)據(jù)的錯誤可使用監(jiān)聽器。

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

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

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

寫一個遞歸組件

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

上面的demo實(shí)現(xiàn)了一個模擬dom事件冒泡的操作，當(dāng)點(diǎn)擊中心圓時，事件逐級傳遞，然后改變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)聽上也是一個有意思的地方，你可以一層一層接力，直到將事件冒泡到最頂層。代碼片段如下：

<template>
...
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor" // 監(jiān)聽子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>

總結(jié)

很簡單的一個demo，重點(diǎn)是我們是否了解Vue每個組件定義的name的真正用途是什么。每個組件的name值其實(shí)也是為了幫助我們實(shí)現(xiàn)遞歸的。

代碼邏輯也很簡單，重點(diǎn)在我的子組件。但父組件傳過來的樹形數(shù)據(jù)結(jié)構(gòu)到子組件后，我們需要拿到數(shù)據(jù)并做遍歷，然后再下一行加入核心邏輯：if 發(fā)現(xiàn)我們有子數(shù)據(jù)，那么我們直接調(diào)用自身組件，也就是直接使用name值做組件聲明。最關(guān)鍵的是要把子數(shù)據(jù)結(jié)構(gòu)再傳入我們自身組件，那么我們就成功的實(shí)現(xiàn)了數(shù)據(jù)的層層遍歷。

當(dāng)然，這塊兒的子數(shù)據(jù)結(jié)構(gòu)字段我這里叫chirden，一般企業(yè)開發(fā)是后臺給我們的，他們也可以叫A，叫B，我們需要根據(jù)自己的數(shù)據(jù)字段情況，去做相應(yīng)的修改。

到此這篇關(guān)于Vue實(shí)現(xiàn)遞歸組件的文章就介紹到這了,更多相關(guān)Vue實(shí)現(xiàn)遞歸組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！