使用vue自定义组件实现树形列表

最近公司做新项目用的是vue，有一个功能做一个树形列表由于之前一直用的是jquery操作dom,刚接触vue走了不少弯路，特意写博客记录一下

一、js自定义一个组件

    <script type="text/template" id="tpl">
           <ol class="dd-list" style="margin-left:60px;">
                <li class="dd-item dd2-item dept-name" style="margin-bottom:10px" v-for="(item,index) in model" :num="index" @click.self="toggle(item.childTreeNode)" :key="item.id">
                     <span style="position:absolute;top:-2px;left:-52px;" class="dd-item"><img v-bind:src="item.imageUrl" width="40px;" height="40px;"></span>
                     <div class="dd2-content" style="cursor:pointer;">
                         {{item.categoryName}} <span style="padding-left:20px;color:red;" @click="toggle(item.childList,item)">+</span>
                        <div style="margin-left:20px;margin-top:-20px;margin-left:300px;">
                             <a class="green dept-edit" href="#" style="text-decoration:none;" >
                            编辑 <i class="ace-icon"></i>
                             </a>
                        </div>
                         &nbsp;
                         <a class="red dept-delete" href="#"  style="text-decoration:none;">
                             <i class="ace-icon fa fa-flag bigger-100"></i>
                             <span style="float:right;"></span>
                         </a>
                     </div>
                        <items v-if="item.open" :model="item.childList"></items>
                 </li>
             </ol>
        </script>

     Vue.component('items',{
             props:['model'],
             name:'items',
             template:'#tpl', 
             data:function(){
                 return {
                     open:false,
                     num:''
                 }
             },
             methods:{
                 toggle:function(e,item){
                     console.log(item);
                     if(e){
                         console.log(item.open);
                         var flag = item.flag;
                         if(flag == '-'){
                             item.flag="+";
                             item.open = false;
                         }else{
                             item.flag="-";
                             item.open = true;
                         }
                        
                        // this.open=!this.open
                     }
                 }
             }
         })

var vue = new Vue({         
                    el:"#app",
                    data: {       
                        data:[],
                    },
                    mounted:function(){
                        var self = this;
                        var param = new URLSearchParams();
                         axios.post('../category/findCategoryTree',param)
                           .then(function(res){
                             if (res.data.code==0) {
                                 self.data = res.data.data.categoryTree;//从后台动态获取树形数据
                                 console.log(self.data);
                             }
                             else{
                               Message.error(res.body.statusMsg);
                             }
                           },
                           function(err){
                               Message.error('与服务器连接错误！');             
                           }) 
                  });

在需要显示的页面html代码

<div class="main-content-inner" id="app">
    <div class="col-sm-3">
        <div class="table-header" style="width:1200px;">
            分类管理&nbsp;&nbsp;
            <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
            </a>
        </div>
        <div id="categoryList" style="width:1200px;">
            <items :model='data'></items>
        </div>
    </div>
 
</div>