vue-递归组件 

<!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>

 

posted @ 2018-01-22 15:40  吾生有涯，而知无涯！  阅读(1082)  评论(0)    收藏  举报