Vue2递归组件如何实现树形菜单-创新互联

小编给大家分享一下Vue2递归组件如何实现树形菜单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联服务项目包括盂县网站建设、盂县网站制作、盂县网页制作以及盂县网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,盂县网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到盂县省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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传给子组件。
  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递归组件如何实现树形菜单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享题目:Vue2递归组件如何实现树形菜单-创新互联
URL网址:http://pwwzsj.com/article/dciiod.html