vue 循环 递归组件_vue2 递归组件--树形

递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。

效果如下图，点击后打开二级菜单，再点击后打开三级。

//js

//引子

//思想：当v-if=‘false’时，循环时进行的。所以一开始就设置为false。  ggg:{

name:'gs',

template:`

我是p标签

  //这儿show必须要初始值为false，不然就是堆栈溢出，死循环。

　　　　　　　　　　　　//这个是循环组件。命名后当函数使。

`,

}

由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。

树状结构：

我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，

它不会报错，这个应该是被vue优化了。

思想：递归调用某个组件，而这个组件的作用就是解析出此层的数据。因此数据的格式就有技巧：

msg:[{//对此数组遍历。 js

text:1, //第一层数据 ，要显示1，就要对顶层text遍历，xxx.text就得到1。点击‘1’弹出1-1就需要将父组件的xxx.next传给子组件。

nex