vue树形结构的实现

1. 主要代码

使用单文件组件的方式, 需要一个父组件treeMenu, 和子组件treeItem

1.1 父组件treeMenu.vue

<template>
  <ul class="treeMenu">
    <tree-item
      :nodes="treeData">
    </tree-item>
  </ul>
</template>

<script>
export default {
  name: 'treeMenu',
  data: () => {
    return {
      treeData: {
        label: 'china',
        nodes: [{
          label: 'hubei',
          nodes: [{
            label: 'wuhan'
          },
          {
            label: 'yichang'
          },
          {
            label: 'jinzhou'
          }]
        }]
      }
    }
  }

}
</script>

1.2 子组件treeItem.vue

<template>
  <li class="tree-item-li">
    <div
      class="tree-item-label"
      :class="{active: isActive}"
      @click="activeItem"
    >{{nodes.label}}</div>
    <ul v-if="isEnd" class="tree-item-ul">
      <tree-item
        v-for="(item, index) in nodes.nodes"
        :key="index"
        :nodes="item">
      </tree-item>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'treeItem',
  props: ['nodes'],
  data () {
    return {
    }
  },
  computed: {
    isEnd () {
      console.log(this.nodes.nodes)
      return this.nodes.nodes && this.nodes.nodes.length
    }
  },
  methods: {
    activeItem: () => {
    }
  }
}

</script>

2. 坑点

使用递归组件时, 子组件必须在全局注册, 否则在调用时会提示引用错误
必须设置递归终止条件, 否则会导致内存溢出报错

3. TODO

本篇主要实现了从数据到视图的数据展示的实现, 下一篇将实现从视图到数据的操作数据的实现