快捷導(dǎo)航

Vue組件化開發(fā)的必備技能之組件遞歸

更新時間：2022年01月29日 10:46:34 作者：前端阿飛

組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下

前言

不知道大家有沒遇到過這樣的場景：渲染列表數(shù)據(jù)的時候，列表的子項還是列表。如果層級少尚且可以用幾個for循環(huán)搞定，但是層級多或者層級不確定就有點(diǎn)無從下手了。

其實這就是樹形結(jié)構(gòu)數(shù)據(jù)，像常見的組織架構(gòu)圖，文件夾目錄，導(dǎo)航菜單等都屬于這種結(jié)構(gòu)。很多組件庫都帶有樹形組件，但往往樣式不是我們想要的，改起來也非常的費(fèi)勁。那么，如何自己渲染這些數(shù)據(jù)呢？答案就是——組件遞歸！

效果展示

以上就是使用組件遞歸，并加入簡單交互的展示效果。點(diǎn)擊節(jié)點(diǎn)會在控制臺輸出節(jié)點(diǎn)對應(yīng)的數(shù)據(jù)，如果有子節(jié)點(diǎn)，則會展開或收起子節(jié)點(diǎn)。接下來我們就看看如何實現(xiàn)以上效果吧！

渲染完整數(shù)據(jù)

渲染數(shù)據(jù)這一步非常簡單，首先是把樹形結(jié)構(gòu)封裝成一個列表組件，其次判斷每一項有沒有子節(jié)點(diǎn)，如果有子節(jié)點(diǎn)，再使用自身組件去渲染就可以了。

src/components/myTree.vue

<template>
  <div class="tree-item">
    <div v-for="item in treeData" :key="item.id">
      <div class="item-title">{{ item.name }}</div>
      <div v-if="item.children && item.children.length" class="item-childen">
        <my-tree :treeData="item.children"></my-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-item {
  .item-title {
    padding: 4px 8px;
  }
  .item-childen {
    padding-left: 20px;
  }
}
</style>

src/App.vue

<template>
  <my-tree :tree-data="treeData"></my-tree>
</template>

<script>
const treeData = [
  { id: 1, name: '一級1' },
  {
    id: 2,
    name: '一級2',
    children: [
      { id: 3, name: '二級2-1' },
      { id: 4, name: '二級2-2' }
    ]
  },
  {
    id: 5,
    name: '一級3',
    children: [
      {
        id: 6,
        name: '二級3-1',
        children: [
          { id: 7, name: '三級3-1-1' },
          { id: 8, name: '三級3-1-2' }
        ]
      },
      { id: 9, name: '二級3-2' },
      { id: 10, name: '二級3-3' }
    ]
  }
]
import myTree from '@/components/myTree.vue'
export default {
  components: {
    myTree
  },
  data() {
    return {
      treeData: treeData
    }
  }
}
</script>

效果如下

獲取節(jié)點(diǎn)數(shù)據(jù)

接下來我們要做的是，點(diǎn)擊節(jié)點(diǎn)時在控制臺輸出對應(yīng)的數(shù)據(jù)。首先我們使用 $emit，將一級節(jié)點(diǎn)的 item 傳遞出去，也就是子傳父的方法，相信大家都會。

其次是將內(nèi)層節(jié)點(diǎn)的數(shù)據(jù)傳遞出去，同樣使用子傳父的方法，只是我們需要給組件里面的 my-tree 綁定@node-click="$emit('node-click', $event)"，這樣每次子級每次都可以調(diào)用父級的 node-click 方法，父級又調(diào)用它的父級 node-click 方法，最終調(diào)的都是最外層的 node-click 方法，我們只需要在這個過程中，把數(shù)據(jù)傳遞過去就可以了。這塊有點(diǎn)繞，相信大家多看幾遍應(yīng)該可以看懂。修改如下：

src/components/myTree.vue

<div class="item-title" @click="itemNodeClick(item)">{{ item.name }}</div>
<div v-if="item.children && item.children.length" class="item-childen">
  <my-tree
    :treeData="item.children"
    @node-click="$emit('node-click', $event)"
  ></my-tree>
</div>
...
itemNodeClick(item) {
  this.$emit("node-click", item)
}

src/App.vue

<my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree>
...
nodeClick(val) {
  console.log(val)
}

效果如下

動態(tài)展開收起

這一步的思路是給組件設(shè)置一個數(shù)組，數(shù)組中存放的是當(dāng)前列表中需要展開的節(jié)點(diǎn)的id，當(dāng)點(diǎn)擊節(jié)點(diǎn)的時候添加或刪除節(jié)點(diǎn)id，然后判斷每個節(jié)點(diǎn)的id在不在這個數(shù)組，在則顯示子節(jié)點(diǎn)，不在則隱藏子節(jié)點(diǎn)。

src/components/myTree.vue

<div class="item-title" @click="nodeClick(item)">
  <span>{{ item.name }}</span>
  <span v-if="item.children && item.children.length">
    [{{ isOpen(item.id) ? '-' : '+' }}]
  </span>
</div>
<div
  v-if="item.children && item.children.length"
  v-show="isOpen(item.id)"
  class="item-childen"
>
  <my-tree
    :treeData="item.children"
    @node-click="$emit('node-click', $event)"
  ></my-tree>
</div>
...
data() {
  return {
    expandedKeys: [] // 當(dāng)前列表需要展開的節(jié)點(diǎn)id組成的數(shù)組
  }
},
methods: {
  nodeClick(item) {
    this.$emit('node-click', item)
    if (item.children && item.children.length) {
      let index = this.expandedKeys.indexOf(item.id)
      if (index > -1) {
        // 如果當(dāng)前節(jié)點(diǎn)id存在數(shù)組中，則刪除
        this.expandedKeys.splice(index, 1)
      } else {
        // 如果當(dāng)前節(jié)點(diǎn)id不存在數(shù)組中，則添加
        this.expandedKeys.push(item.id)
      }
    }
  },
  isOpen(id) {
    // 判斷節(jié)點(diǎn)id在不在數(shù)組中，在則顯示，不在則隱藏
    return this.expandedKeys.includes(id)
  }
}

效果如下

最后我們再添加一些樣式，就大功告成啦！

完整代碼

src/components/myTree.vue

<template>
  <div class="tree-item">
    <div v-for="item in treeData" :key="item.id">
      <div class="item-title" @click="nodeClick(item)">
        <span>{{ item.name }}</span>
        <span v-if="item.children && item.children.length">
          [{{ isOpen(item.id) ? '-' : '+' }}]
        </span>
      </div>
      <div
        v-if="item.children && item.children.length"
        v-show="isOpen(item.id)"
        class="item-childen"
      >
        <my-tree
          :treeData="item.children"
          @node-click="$emit('node-click', $event)"
        ></my-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      expandedKeys: [] // 當(dāng)前展開的節(jié)點(diǎn)id組成的數(shù)組
    }
  },
  methods: {
    nodeClick(item) {
      this.$emit('node-click', item)
      if (item.children && item.children.length) {
        let index = this.expandedKeys.indexOf(item.id)
        if (index > -1) {
          // 如果當(dāng)前節(jié)點(diǎn)id存在數(shù)組中，則刪除
          this.expandedKeys.splice(index, 1)
        } else {
          // 如果當(dāng)前節(jié)點(diǎn)id不存在數(shù)組中，則添加
          this.expandedKeys.push(item.id)
        }
      }
    },
    isOpen(id) {
      // 判斷節(jié)點(diǎn)id在不在數(shù)組中，在則顯示，不在則隱藏
      return this.expandedKeys.includes(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-item {
  cursor: pointer;
  .item-title {
    padding: 4px 8px;
    &:hover {
      background: #eee;
    }
  }
  .item-childen {
    padding-left: 20px;
  }
}
</style>

src/App.vue

<template>
  <my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree>
</template>

<script>
const treeData = [
  { id: 1, name: '一級1' },
  {
    id: 2,
    name: '一級2',
    children: [
      { id: 3, name: '二級2-1' },
      { id: 4, name: '二級2-2' }
    ]
  },
  {
    id: 5,
    name: '一級3',
    children: [
      {
        id: 6,
        name: '二級3-1',
        children: [
          { id: 7, name: '三級3-1-1' },
          { id: 8, name: '三級3-1-2' }
        ]
      },
      { id: 9, name: '二級3-2' },
      { id: 10, name: '二級3-3' }
    ]
  }
]
import myTree from '@/components/myTree.vue'
export default {
  components: {
    myTree
  },
  data() {
    return {
      treeData: treeData
    }
  },
  methods: {
    nodeClick(val) {
      console.log(val)
    }
  }
}
</script>