<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>递归组件</title> <script src="./vue.js"></script> <style> ul,li{ list-style: none; margin: 0; padding: 0; } </style> </head> <body> <div id="app"> <!-- 调用组件 --> <m-tree :data="treeList"></m-tree> </div> <script> // 定义数据结构 var datax = [{ title: '一级目录', children: [{ title: '我的音乐', children: [{ title: "周杰伦", children:[{ title:'发如雪' }] },{ title: '王杰', children:[{ title:'一场游戏一场梦' }] }] }, { title: "我的书籍", children: [{ title: "见识", children:[{ title:'阿萨德' }] },{ title: '简爱', children:[{ title:'as' }] }] }] }] // 创建组件 // 分离的树形菜单列表 列表里调用列表 Vue.component('m-tree-list',{ props:{ data:{ type:Array, default:[] }, incrementCount:{ type:Number, default:0 } }, computed:{ count(){ // 每递归一次 就累加一次记录 var c=this.incrementCount; return ++c; }, stylePadding(){ // 根据递归次数动态计算padding-left的值 return { 'padding-left':this.count*16+"px" } } }, template:` <ul> <li v-for="item of data"> <div class="tree-title" :style="[stylePadding]"> <span>{{item.title}}</span> </div> <!-- 如果有children 属性 继续渲染 --> <m-tree-list :incrementCount="count" v-if="item.children" :data="item.children" ></m-tree-list> </li> </ul> ` }) // 树形菜单 调用列表 Vue.component('m-tree', { data(){ return { count:0 // 初始值为0 } }, props: { data: { type: Array, default: [] } }, template: ` <div class="tree-menu-comm tree-menu"> <m-tree-list :data="data"></m-tree-list> </div> ` }) // 挂载实例 var vm= new Vue({ el: "#app", data () { return { treeList: datax } } }) </script> </body> </html>