vue 組件遞歸

組件遞歸常用到的栗子就比如樹形結構的創建,需要自調用進行遞歸渲染
下面是遞歸組件渲染tree的效果圖:

效果.jpeg

完整的代碼倉庫地址:https://github.com/HuangPingP/vue-tree
1、創建一個treeMenu.vue的組件文件,組件內調用必須定義name 才能自調用

  <ul class="item">
    <li >
      <div :class="{bold: isFolder,'item-info':true}" @click="toggle" >
        <!-- 伸縮圖標 -->
        <span 
        v-if="isFolder" 
        :class="{'iconfont':true,'icon-right-allow':!open,'icon-down-allow':open}">
        </span>
        <span class="item-name ellipsis">{{ model.name }}</span>

        <!-- 操作欄 -->
        <p class="edit-box">
          <i class="iconfont icon-add" @click="addChild"></i>
          <i class="iconfont icon-edit"></i>
          <i class="iconfont icon-dele"></i>
        </p>
      </div>

      <!-- 組件遞歸調用 -->
      <ul class="item-child" v-show="open" v-if="isFolder">
        <item 
          v-for="(model, index) in model.children" 
          :key="index" 
          :model="model">
        </item>
      </ul>
    </li>
  </ul>
  import Vue from 'vue'
  export default {
    props: ['model'],
    name: 'item',  // 必須給組件命名
    data() {
      return {
         open: true
      }
    },
    computed: {
    isFolder() {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    addChild() {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.open = true
      }
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
}

2.調用組件 在helloWord.vue中調用 treeMenu.vue組件

  <tree-menu :model="treeData"></tree-menu>
//數據結構
        treeData:{
            name: 'My Tree',
            children: [
                { name: 'hello' },
                { name: 'watdfs' },
                {
                name: 'child folder',
                children: [
                    {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                    },
                    { name: 'hello' },
                    { name: 'wat' },
                    {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                    }
                ]
                }
            ]
        }

參考https://cn.vuejs.org/v2/examples/tree-view.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 管理系統中很多這樣樹形菜單顯示的,這里要用到組件的遞歸來完成,這里我們來學習下vue關于組件遞歸的實現。 ...
    席坤閱讀 1,074評論 2 4
  • 最近做項目經常會用到一些UI庫,比如element、iview等,這些能夠快速構建應用的庫真的十分方便。比如ivi...
    ALOLONGHUN閱讀 17,479評論 5 15
  • 寫在前面有時候我們需要樹狀菜單,比如通訊錄的分組列表。在這時候數據是樹狀存儲的,給前端的數據需要進行遞歸讀取。這時...
    Yuhoo閱讀 279評論 0 0
  • 基于Vue的組件庫 https://github.com/ElemeFE/element" element 餓了么...
    技術小白熊閱讀 1,741評論 0 16
  • 基于Vue的組件庫 https://github.com/ElemeFE/element" element 餓了么...
    不和諧發光體閱讀 1,161評論 0 8