Vue2递归组件实现树形菜单

//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>　　　　　　　　　}

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>//jsggg:{  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'],//这个是接收父组件过的值}

<li v-for='a in msg' @click.stop.self='show=!show'>// 在li标签添加一个点击事件，改变show的值。　　{{a.text}}　　<gs :msg='a.next' v-if='show' ></gs>　　　　　　　　　  //官网上说了，这儿是show为true才会递归。就是解析下一次数据。</li>　

<template > <div> <ggg :msg='msg'></ggg> //组件使用 父组件传msg 子组件接收(：msg） </div></template><script>export default { //这儿用的脚手架，若是普通文件，这儿就是new Vue（{}） data(){ return { msg:[{  text:1,  next:[{   text:'1-1',   next:[{   text:'1-1-1',   next:[{    text:'1-1-1-1',   }]   }]  },{   text:'1-2' //1-2写在这儿，第二层数据数组中的a[1].text就是‘1-2'  }]  },{  text:2,    },{  text:3,    }] } }, components:{ ggg:{  name:'gs',  template:`  <ul >  <li v-for='a in msg' @click.stop.self='show=!show'>   {{a.text}}   <gs :msg='a.next' v-if='show' ></gs>  </li>  </ul>`,  props:['msg'],  data(){  return {   show:false  }  } } }}</script>