用Vue.js遞歸組件構建一個可摺疊的樹形菜單

時間 2019-11-12

標籤 vue.js vue 遞歸組件構建一個可摺疊菜單欄目 JavaScript 简体版

原文原文鏈接

在Vue.js中一個遞歸組件調用的是其自己，如：vue

Vue.component('recursive-component', {
 
   template: `<!--Invoking myself!-->
 
              <recursive-component></recursive-component>`
 
 });

遞歸組件經常使用於在blog上顯示註釋、嵌套的菜單，或者基本上是父和子相同的類型，儘管具體內容不一樣。例如:node

如今給您演示一下如何有效地使用遞歸組件，我將經過創建一個可擴展/收縮的樹形菜單的來一步步進行。數組

數據結構

一個樹狀UI的遞歸組件將是一些遞歸數據結構的可視化表達。在本教程中，咱們將使用樹狀結構，其中每一個節點都是一個對象：數據結構

一個 label 屬性。app
若是它有子節點，一個 nodes 屬性，則它是一個或多個節點的數組屬性。函數

與全部樹結構同樣，它必須有一個根節點，但能夠無限深。性能

let tree = {
 
   label: 'root',
 
   nodes: [
 
     {
 
       label: 'item1',
 
       nodes: [
 
         {
 
           label: 'item1.1'
 
         },
 
         {
 
           label: 'item1.2',
 
           nodes: [
 
             {
 
               label: 'item1.2.1'
 
             }
 
           ]
 
         }
 
       ]
 
     }, 
 
     {
 
       label: 'item2'  
 
     }
 
   ]
 
 }

遞歸組件

讓咱們作一個遞歸組件來顯示咱們的稱爲 TreeMenu 的數據結構。它只顯示當前節點的標籤，並調用本身來顯示任何子節點。文件名：TreeMenu.vue，內容以下：字體

<template>
 
   <div class="tree-menu">
 
     <div>{{ label }}</div>
 
     <tree-menu 
 
       v-for="node in nodes" 
 
       :nodes="node.nodes" 
 
       :label="node.label"
 
     >
 
     </tree-menu>
 
   </div>
 
 </template>
 
 <script>
 
   export default { 
 
     props: [ 'label', 'nodes' ],
 
     name: 'tree-menu'
 
   }
 
 </script>

若是你使用一個組件遞歸，必須先給 Vue.component 作一個全局的定義，或者，給它一個 name 屬性。不然，任何子組件將沒法進一步調用它，你會獲得一個不肯定的「undefined component error」的錯誤提示。this

基本事件

與任何遞歸函數同樣，你須要一個基本事件來結束遞歸，不然渲染將無限期地繼續下去，最終會致使堆棧溢出。翻譯

在樹菜單中，當咱們到達一個沒有子節點的節點的時候，咱們但願中止遞歸。你能經過 v-if 作到這一功能，但咱們選擇使用 v-for 將隱式地爲咱們實現它；若是 nodes 數組沒有任何進一步的定義 tree-menu 組件將被調用。template.vue文件以下：

<template>
 
   <div class="tree-menu">
 
     ...
 
     <!--If `nodes` is undefined this will not render-->
 
     <tree-menu v-for="node in nodes"></tree-menu>
 
 </template>

使用用法

咱們如今如何使用這個組件？首先，咱們聲明一個Vue實例，具備一個數據結構包括data屬性和定義過的treemenu組件。app.js文件以下：

import TreeMenu from './TreeMenu.vue'
 
 let tree = {
 
   ...
 
 }
 
 new Vue({
 
   el: '#app',
 
   data: {
 
     tree
 
   },
 
   components: {
 
     TreeMenu
 
   }
 
 })

請記住，咱們的數據結構有一個根節點。咱們在主模板開始遞歸調用 TreeMenu 組件，使用根 nodes 屬性來props：

<div id="app">
 
   <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 
 </div>

下面是它目前的樣子：

正確的姿式

在視覺上識別子組件的「深度」是很好的，這樣用戶就能夠從UI中得到數據結構的感受。讓咱們縮進每一層的子節點來實現這個目標。

這是經過增長一個depth prop定義，經過 TreeMenu 來實現。咱們將使用這個值動態地將內聯樣式與轉換綁定在一塊兒：將使用transform: translate的CSS規則爲每一個節點的標籤，從而建立縮進。template.vue修改以下**：**

<template>
 
   <div class="tree-menu">
 
     <div :style="indent">{{ label }}</div>
 
     <tree-menu 
 
       v-for="node in nodes" 
 
       :nodes="node.nodes" 
 
       :label="node.label"
 
       :depth="depth + 1"
 
     >
 
     </tree-menu>
 
   </div>
 
 </template>
 
 <script>
 
   export default { 
 
     props: [ 'label', 'nodes', 'depth' ],
 
     name: 'tree-menu',
 
     computed: {
 
       indent() {
 
         return { transform: `translate(${this.depth * 50}px)` }
 
       }
 
     }
 
   }
 
 </script>

depth 屬性在主模板中從零開始。在上面的組件模板中，你能夠看到每次傳遞到任何子節點時這個值都會遞增。

<div id="app">
 
   <tree-menu 
 
     :label="tree.label" 
 
     :nodes="tree.nodes"
 
     :depth="0"
 
   ></tree-menu>
 
 </div>

注意：記得 v-bind depth值以確保它是一個JavaScript數字類型而不是字符串。

展開/收起

因爲遞歸數據結構可能很大，因此顯示它們的一個很好的UI技巧是隱藏除根節點之外的全部節點，以便用戶能夠根據須要展開或收起節點。

爲此，咱們將增長一個局部屬性showChildren 。若是他的值爲False，子節點將不會被渲染。此值應經過點擊節點切換，因此咱們須要使用一個單擊事件的監聽器方法 toggleChildren 來進行管理。template.vue文件修改以下**：**

<template>
 
   <div class="tree-menu">
 
     <div :style="indent" @click="toggleChildren">{{ label }}</div>
 
     <tree-menu 
 
       v-if="showChildren"
 
       v-for="node in nodes" 
 
       :nodes="node.nodes" 
 
       :label="node.label"
 
       :depth="depth + 1"
 
     >
 
     </tree-menu>
 
   </div>
 
 </template>
 
 <script>
 
   export default { 
 
     props: [ 'label', 'nodes', 'depth' ],
 
     data() {
 
       return { showChildren: false }
 
     },
 
     name: 'tree-menu',
 
     computed: {
 
       indent() {
 
         return { transform: `translate(${this.depth * 50}px)` }
 
       }
 
     },
 
     methods: {
 
       toggleChildren() {
 
         this.showChildren = !this.showChildren;
 
       }
 
     }
 
   }
 
 </script