vue递归渲染页面

不废话 ，直接上代码

 子组件

<template>
  <div class="treebox">
    <ul>
      <li v-for = "(item) in folder">
        <span class="title">
          <span @click = "select(item)">{{ item.label }}</span>
        </span>
        <treelist v-if = "item.show" :folder = "item.children" :select = "select"></treelist>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:["folder","select"],
    name: 'treelist',
    data () {
      return {
        show: true
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .treebox{
    width: 100%;
  }
  .treebox ul {
    width: 100%;
  }
  .treebox ul li{
    width: 100%;
  }
  .treebox ul li .title i{
    font-size: 10px;
  }
</style>

父组件引用代码：

<template>
  <div class="div">
    <Treeform :folder = "trees" :select = "select"></Treeform>
  </div>
</template>
<script>
  import Treeform from './treelist'
  export default {
    name:'tree',
    components: {
      Treeform
    },
    data () {
      return {
        trees: [
          {
            id:1,
            label:"1级目录1",
            show:false,
            children:[
              {
                id:"1-1",
                label:"1.1目录",
              },
              {
                id:"1-2",
                label:"1.2目录"
              },
              {
                id:"1-3",
                label:"1.3目录"
              },

            ]
          },
          {
            id:2,
            label:"1级目录2",
            show:false
          },
          {
            id:3,
            label:"1级目录3",
            show:false,
            children:[
              {
                id:"3-1",
                label:"3.1目录"
              },
              {
                id:"3-2",
                label:"3.2目录",
                show:false,
                children:[
                  {
                    id:"3-2-1",
                    label:"3.2.1目录"
                  },
                  {
                    id:"3-2-2",
                    label:"3.2.2目录"
                  },
                  {
                    id:"3-2-3",
                    label:"3.2.3目录"
                  }
                ]
              }
            ]
          },
          {
            id:4,
            label:"1级目录4",
            show:false,
            children:[
              {
                id:"4-1",
                label:"4.1目录"
              },
              {
                id:"4-2",
                label:"4.2目录",
                show:false,
                children:[
                  {
                    id:"4-2-1",
                    label:"4.2.1目录"
                  }
                ]
              }
            ]
          },
          {
            id:5,
            label:"1级目录5",
            show:false,
            children:[
              {
                id:"5-1",
                label:"5.1目录",
                show:false,
                children:[
                  {
                    id:"5-1-1",
                    label:"5.1.1目录"
                  },
                  {
                    id:"5-1-2",
                    label:"5.1.2目录",
                    show:false,
                    children:[
                      {
                        id:"5-1-2-1",
                        label:"5.1.2.1目录"
                      },
                    ]
                  }
                ]
              },
              {
                id:"5-2",
                label:"5.2目录",
                show:false
              }
            ]
          },
        ],
        money: 1,
        num: ''
      }
    },
    methods:{
      select(data){
        console.log(data);
        data.show = !data.show
      }
    },

  }
</script>
<style scoped>

</style>