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
到此基本概念已经齐全了。
点击1 出现1-1:
点击1想出现1-2:修改data的值,从顶层数据出现1 2 3可以推断出来。
全代码:
//组件使用 父组件传msg 子组件接收(:msg)
以上就是“Vue2递归组件怎么实现树形菜单”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
新闻名称:Vue2递归组件怎么实现树形菜单
文章地址:http://myzitong.com/article/jspdhp.html