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