Vue递归组件(树形)

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

代码:

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

      name:'gs',
      template:`
          <div>
          　　<p @click.stop='show=!show'>我是p标签</p>   //这儿show必须要初始值为false，不然就是堆栈溢出，死循环。
         　　 <gs v-if='show' ></gs>　　　　　　　　　　　　//这个是循环组件。命名后当函数使。
          </div>
    `,　　　　　　　　　

}

由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。
树状结构：
　　我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，
它不会报错，这个应该是被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

　　<div>
    　　<ggg :msg='msg'></ggg> //这儿写在父组件模板中。
  　</div>

//js

ggg:{
      name:'gs',// 这儿必须起个名字，这个名字其实就是构造函数的名字。没有名字无法递归组件。
      template:`// 构造函数的return值,模板。
      <ul >       
　　　　　　<li v-for='a in text'> 
          {{a.text}}//第一次1、2、3；第二次 1-1 ，第三次1-1-1，第四次1-1-1-1 
          <gs :msg='a.next'></gs> // 这儿递归用组件（构造函数），代码运行到这儿时会返回去调用。这儿有个很重要的操作，将这一层的a.text数据传到下一层去，并且改为text
        </li>
      </ul>`,
      props:['msg'],//这个是接收父组件过的值
}