Vue.js示例：树型视图； 模式组件；

树型图

本示例是一个简单的树形视图实现，它展现了组件的递归使用。

mycode pen:   https://codepen.io/chentianwei411/pen/KGKQxE 

 

重点：递归是如何形成的。嵌套组件！！

 

如果不使用嵌套组件，而使用<li>元素的话，不会形成递归效果。

 

 

基本结构：

//组件模版结构：最外层根元素是<li>，这也是形成递归效果的必要元素。
<li>
    <div></div>        　　//显示对象的children元素，一个数组。
    <ul>　　　　　　　　　　　//显示children元素的子元素，都是对象。
       <组件></组件>　　　　 //使用自身组件，形成递归效果。
       <li></li>
    </ul>
</li>

 

功能：

1. 单击子元素，显示／隐藏 子元素。
2. 双击子元素，如果子元素不是folder，则把它的格式改为数组[],并附加一个子元素对象。
3. 单击加号+，附加一个子元素对象。

 

实现思路：

首先，演示数据data是一个多层嵌套的对象结构。但每层只有name和children两个key/value对儿。

 

其次，构思基本结构。如上图所示