标签：数组遍历 报错 设置 template com 方法 点击事件 -- 点击
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。
效果如下图，点击后打开二级菜单，再点击后打开三级。
//js
//引子
aaa:{ //组件名字aaa，挂载到components中的。 name:‘aa‘, template:` <div>组件</div> <aa></aa>` //其实这儿就已经是递归调用了，只要在html中使用但是会无限循环下去。所以就需要一个结束点。这个结束点怎么给？
}
由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的，并不共有，所以在组件数据中设置flag或者其他，那是行不通的。
其实递归组件正真的用法就是做树状结构用的。
做法如下：
我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，
它不会报错，这个应该是被vue优化了。
思想：递归调用某个组件，而这个组件的作用就是解析出此层的数据。因此数据的格式就有技巧：
msg:[{//对此数组遍历。 js text:1, //第一层数据 ，要显示1，就要对顶层text遍历，xxx.text就得到1。点击‘1’弹出1-1就需要将父组件的xxx.next传给子组件。 next:[{ text:‘1-1‘,//第二层数据 next:[{ text:‘1-1-1‘,//第三层数据 next:[{ text:‘1-1-1-1‘, }] }] }] },{ text:2, //第一层数据 },{ text:3, //第一层数据 }]
//html
//js
到此基本概念已经齐全了。
点击1 出现1-1：
点击1想出现1-2：修改data的值，从顶层数据出现1 2 3可以推断出来。
全代码：
标签：数组遍历 报错 设置 template com 方法 点击事件 -- 点击
原文地址：http://www.cnblogs.com/gsgs/p/6687030.html
