1.在项目中新建两个.vue组件：test1，test2

在mian.js内导入test2组件，变为全局组件：

import test2 from './test2'

Vue.component('item',test2);

2.test1.vue的内容：

<template>
  <ul id="demo">
    <item
      class="item"
      :model="treeData">
    </item>
  </ul>
</template>
<script>

  export default{
    data(){
      return{
        treeData:
          {name: 'My Tree',// 一级数据
            children: [
              { name: 'hello2' },// 二级数据
              { name: 'wat2' },
              {
                name: 'child folder2',
                children: [
                  {name: 'child folder3',// 三级数据
                    children: [
                      { name: 'hello4' },// 四级数据
                      { name: 'wat4' }
                    ]
                  },
                  { name: 'hello3'},// 三级数据
                  { name: 'wat3'},
                  {name: 'child folder3',
                    children: [
                      { name: 'hello4' },// 四级数据
                      { name: 'wat4' }
                    ]
                  }
                ]
              }
            ]
          }

      }
    }
  }
</script>
<style>
  ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
  }
</style>

3.test2的内容：

<template>
  <li style="list-style: none;" id>
    <!-- 蓝色是点击事件，红色是双击事件-->
    <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
      {{ model.name }}
      <!--有孩子时，没有展开孩子open为false显示为+号，-->
      <span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
    </div>
    <ul  v-show="open" v-if="isFolder">
      <item class="item" v-for="(model,index) in model.children" :key="index" :model="model">{{model.name}}</item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</template>
<script>
  export default{
    props:{
      model:Object
    },
    data(){
      return{
        open:false,
      }
    },
    computed: {
      isFolder: function () {// 是否有文件，有的话返回子文件和子文件个数
        return this.model.children && this.model.children.length
      }
    },
    methods: {
      toggle: function () {// 如果有孩子时，选择展示或者隐藏孩子
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeType: function () {// 双击时增加为带有子节点的父节点
        if (!this.isFolder) {
          // vue动态添加新的根级目录，官方方法vm.$set( target, key, value )接收三个参数，
          // target可以为对象或者数组，key可以为字符串或者数字，value可以为任意类型
          // 也可以使用Vue.set(this.model, 'children', []),这样使用vue的全局实例，但是需要在该页面导入vue
          this.$set(this.model, 'children', []);
          this.addChild();
          this.open = true
        }
      },
      addChild: function () {// 添加子节点
        this.model.children.push({
          name: 'new stuff'
        })
      }
    }

  }
</script>
<style>
  body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
  }
  .item {
    cursor: pointer;
  }
  .bold {
    font-weight: bold;
  }
</style>

4.实现效果：

 

5.单击加号时增加一个子节点，双击加号时增加一个带有子节点的根节点：

单击时：

双击时：