前言

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

一、遞歸組件是什么？

字面理解為層層遞進(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 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)聽(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>

總結(jié)

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

代碼邏輯也很簡(jiǎn)單，重點(diǎn)在我的子組件。但父組件傳過(guò)來(lái)的樹(shù)形數(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è)開(kāi)發(fā)是后臺(tái)給我們的，他們也可以叫A，叫B，我們需要根據(jù)自己的數(shù)據(jù)字段情況，去做相應(yīng)的修改。

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

最新評(píng)論