您现在的位置是:网站首页> 编程资料编程资料
vue递归组件实现树形结构_vue.js_
2023-05-24
388人已围观
简介 vue递归组件实现树形结构_vue.js_
本文实例为大家分享了vue递归组件实现树形结构,供大家参考,具体内容如下
一、递归组件
什么是递归组件?简单来说就是在组件中内使用组件本身。函数自己调用自己。很多情况下我们呢刷数据的时候,不知道到底这个数据结构是有多少层,那么这个时候我们就用到了递归来实现。
二、先用for来遍历:
父组件中:
子组件中:
{{item.name}}
{{item.name}}
{{item.name}}
{{item.name}}
效果图如下:

三、递归来实现?
通过组件自身的 name名字来实现组件自身的递归调用 .
父组件中:
子组件:
{{isShow?'-':'+'}}{{title}}
效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- http proxy 对网络请求进行代理使用详解_JavaScript_
- 关于react中的常见错误及解决_React_
- js中常见切割截取字符串的几种方法小结_javascript技巧_
- JavaScript 设计模式之洋葱模型原理及实践应用_JavaScript_
- Vue脚手架搭建及创建Vue项目流程的详细教程_vue.js_
- Vue源码之rollup环境搭建步骤详解_vue.js_
- react card slider实现滑动卡片教程示例_React_
- TypeScript学习笔记之类型缩小_javascript技巧_
- Vue常见组件间通信方案及典型应用场景详解_vue.js_
- 小程序统计来源信息的方案与具体代码_javascript技巧_
