前言

??　前段時(shí)間使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，今天寫(xiě)出來(lái)和大家一起分享。

遞歸組件

??　組件在它的模板內(nèi)可以遞歸地調(diào)用自己，只有當(dāng)它有 name 選項(xiàng)時(shí)才可以。 在官網(wǎng)這句話(huà)就是關(guān)鍵定義組件是一定要有name屬性。

模擬數(shù)據(jù)格式如下：

[
    {
      "id": "1",
      "menuName": "基礎(chǔ)管理",
      "menuCode": "10",
      "children": [
        {
          "menuName": "用戶(hù)管理",
          "menuCode": "11"
        },
        {
          "menuName": "角色管理",
          "menuCode": "12",
          "children": [
            {
              "menuName": "管理員",
              "menuCode": "121"
            },
            {
              "menuName": "CEO",
              "menuCode": "122"
            },
            {
              "menuName": "CFO",
              "menuCode": "123"
            },
            {
              "menuName": "COO",
              "menuCode": "124"
            },
            {
              "menuName": "普通人",
              "menuCode": "124"
            }
          ]
        },
        {
          "menuName": "權(quán)限管理",
          "menuCode": "13"
        }
      ]
    },
    {
      "id": "2",
      "menuName": "商品管理",
      "menuCode": ""
    },
    {
      "id": "3",
      "menuName": "訂單管理",
      "menuCode": "30",
      "children": [
        {
          "menuName": "訂單列表",
          "menuCode": "31"
        },
        {
          "menuName": "退貨列表",
          "menuCode": "32",
          "children": []
        }
      ]
    },
    {
      "id": "4",
      "menuName": "商家管理",
      "menuCode": "",
      "children": []
    }
  ]

html我們思路按照ul里面套li，無(wú)限ul套li，標(biāo)題用div元素包裹，

<template>
  <li>
    <span @click="toggle">      <!-- toggle:點(diǎn)擊關(guān)閉展開(kāi) -->
      <i v-if="isFolder" class="icon" :class="[open ? 'folder-open' : 'folder']" @cilck="toggle"></i>
      <!-- <i v-if="isFolder" class="icon " :class="[open ? 'folder-open' : 'folder']"></i> -->
      <i v-if="!isFolder" class="icon folder-text"></i>
      {{model.menuName}}
    </span>
    <ul v-show="open" v-if="isFolder">
      <treeMenu v-for="item in model.children" :model="item"></treeMenu>
    </ul>
  </li>
</template>

官方文檔里面寫(xiě)的遞歸組件強(qiáng)調(diào)了使用name屬性

需要注意的是，由父組件傳遞過(guò)來(lái)的數(shù)據(jù)要先進(jìn)行深拷貝哦
深拷貝：把props賦值到data里，賦值的同時(shí)深拷貝一下，data里 JSON.parse(JSON.stringify(這個(gè)值就行了))，data值自己命名

export default {
    name: 'treeMenu',
    //props: ['model'],  //這樣和下面效果一樣
    props: {
      model: { type: Object },
    },
    components: {},
}

按照vue的思想，不操作Dom樹(shù)，我們定義兩個(gè)變量，一個(gè)顯示隱藏子菜單(open),一個(gè)存不存子菜單修改圖標(biāo)(isFolder)。

    data() {
      return {
        open: false, //一個(gè)顯示隱藏子菜單(open)
        //isFolder: true    //這個(gè)不要寫(xiě)死，運(yùn)用計(jì)算屬性計(jì)算看存不存在
      }
    },

利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值，修改圖標(biāo)，判斷存在不子級(jí)和子級(jí)長(zhǎng)度

    computed: {
      isFolder() { //利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值，修改圖標(biāo)，判斷存在不子級(jí)和子級(jí)長(zhǎng)度
        // return this.model.children && this.model.children.length  //和下面效果一樣
        let isFolder = false
        if (this.model.children && this.model.children.length) {
          isFolder = true;
        } else {
          isFolder = false;
        }
        return isFolder
      }
    },

顯示隱藏事件

    methods: {
      toggle() {
        if (this.isFolder) {
          this.open = !this.open
        }
      }
    },

寫(xiě)到這里我們已經(jīng)做完一個(gè)樹(shù)形菜單了