Vue2递归组件怎么实现树形菜单

今天小编给大家分享一下Vue2递归组件怎么实现树形菜单的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

田阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

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

//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传给子组件。
  next:[{
   text:'1-1',//第二层数据
   next:[{
   text:'1-1-1',//第三层数据
   next:[{
    text:'1-1-1-1',
   }]
   }]
  }]
 },{
  text:2, //第一层数据
 },{
 text:3, //第一层数据
 }]

//html
　　

 　　 //这儿写在父组件模板中。
 　

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

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

点击1 出现1-1：

// 在li标签添加一个点击事件，改变show的值。
　　{{a.text}}
　　　　　　　　　　　

  //官网上说了，这儿是show为true才会递归。就是解析下一次数据。
　

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

全代码：

 

  //组件使用 父组件传msg 子组件接收(：msg）
 

以上就是“Vue2递归组件怎么实现树形菜单”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。