vue递归组件

父组件页面

<template>
  <div id='test'>
    <ul>
      <tree :model="treeData"></tree>
    </ul>
  </div>
</template>

<script>
  import tree from '@/components/tree'
  export default {
    data () {
      return {
        treeData: {
          title: 'Web全栈架构师',
          children: [
            {title: 'Java架构师'},
            {
              title: 'JS高级',
              children: [
                {title: 'ES6'},
                {title: '动效'},
                {title: '动效'},
              ]
            },
            {
              title: 'PHP',
              children: [
                {
                  title: 'thinkPhP',
                  children: [
                    {
                      title: 'thinkPhp3.2'
                    },
                    {
                      title: 'thinkPhp5.2'
                    }
                  ]
                },
                {title: 'Php动效'},
                {title: 'laravel'},
              ]
            },
          ]
        }
      }
    },
    created(){

    },
    methods:{

    },
    components: {
      tree
    }
  }
</script>

<style scoped lang="scss">
#test{
} 
</style>

子组件页面

<template>
  <li>
    <div @click="toggle">
      <!-- 标题 -->
      {{model.title}}
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div> 
    <ul v-show="open">
      <tree class="item" v-for="model in model.children" :model="model" :key="model.id"></tree>
    </ul>
  </li>
</template>

<script>
  export default {
  // 这里要写name:tree才可以递归
    name:'tree',
    props:{
      model: {
        type: Object,
        require: true
      }
    },
    data () {
      return {
        open: false
      }
    },
    computed: {
      isFolder:function(){
        return this.model.children && this.model.children.length;
      }
    },
    created(){

    },
    methods:{
      toggle(){
        if (this.isFolder){
          this.open = !this.open
        }
      }
    },
    components: {

    }
  }
</script>

<style scoped lang="scss">
#tree{
} 
</style>