Vue 递归树

和angularjs的ng-include可以直接插入html不同的是，在vue中需要组件的自身调用来实现递归树

调用侧代码

<template>
  <div id="app">
    <tree :model="treeData"/>
  </div>
</template>

<script>
import tree from './components/tree.vue';

export default {
  name: 'app',
  components: {
    tree
  },
  data: function () {
      return {
        treeData:{
            name: 'My Tree',
            children: [
                { name: 'hello' },
                { name: 'wat' },
                {
                    name: 'child folder',
                    children: [
                        {
                            name: 'child folder',
                            children: [
                                { name: 'hello' },
                                { name: 'wat' }
                            ]
                        },
                        { name: 'hello' },
                        { name: 'wat' },
                        {
                            name: 'child folder',
                            children: [
                                { name: 'hello' },
                                { name: 'wat' }
                            ]
                        }
                    ]
                }
            ]
        }
      }
  }
}
</script>

组件代码

<template id="item-template">
    <div>
        <div style="text-align:left">
            {{model.name}}
        </div>
        <!-- 组件中引用当前组件，传入下级数据 -->
        <div style="margin-left:20px">
            <tree class="tree" v-for="(model,index) in model.children" :key="index" :model="model"></tree></tree>
        </div>
    </div>
</template>

<script>
export default {
  name: 'tree',
  template: '#item-template',
  props: {
        model: Object
  },
  data: function () {
      return {
      }
  }
}
</script>

demo in GitHub:

https://github.com/squareCY/vue-tree-demo.git