Vue2递归组件实现树形菜单

前端之家收集整理的这篇文章主要介绍了Vue2递归组件实现树形菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用。于是自己查网摸索了一下,这儿只把核心思想写出来。

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

  

我是p标签

 //这儿show必须要初始值为false,不然就是堆栈溢出,死循环。

               

//这个是循环组件。命名后当<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>使。
          }

由于每次递归组件,就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。

树状结构:

  我们在父组件给出一个数据,子组件调用这个数据,然后子组件的子组件调用它父组件的数据,如此循环下去。只要数据结构相同,他们调用方法相同,就行的通。当最后没有子组件的时候, 它不会报错,这个应该是被vue优化了。

思想:

递归调用某个组件,而这个组件的作用就是解析出此层的数据。因此数据的格式就有技巧:

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,//第一层数据
}]

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章