Vue2递归组件实现树形菜单

到此基本概念已经齐全了。

点击1 出现1-1：

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

点击1想出现1-2：修改data的值，从顶层数据出现1 2 3可以推断出来。

全代码：

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