vue 递归组件多级_Vue递归组件实现树形结构菜单
Tree 组件是递归类组件的典型代表，它常用于文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
如图所示，我们要实现的就是这样一个效果。之前我们写树状结构都是用jQuery来实现的，用Vue怎么实现呢？
一、数据部分模拟
menuList:[
{
title:'菜单1',
children:[
{
title:'菜单1-1',
children:[
{title:'菜单1-1-1'},
{title:'菜单1-1-2'},
{title:'菜单1-1-3'}
]
},
{title:'菜单1-2'},
{title:'菜单1-3'}
]
},
{title:'菜单2'},
{title:'菜单3'}
]
复制代码
二、组件各部分实现
Menu.vue
首先我们来写个menu组件,这里放个ul列表，里面的内容，用插槽来表示。
export default {
name: "Menu"
}
复制代码
MenuItem.vue
如果没有子节点，所要展示的标题
export default {
name: "MenuItem"
}
复制代码
SubMenu.vue
export default {
name: "SubMenu",
data(){
return {flag:false}
},
methods:{
change(){
this.flag=!this.flag
}
}
}
.sub{
padding-left:20px;
}
复制代码
三、递归组件ReSubMenu.vue
这里到了我们实现树形结构思想的重点，即递归组件。当我们重复判断有没有子节点，并做出相应的展示的时候，这里就可以使用递归组件了。方便快捷，你值得拥有。
由于有子节点会循环SubMenu这部分操作，所以单独提出来放到ReSubMenu组件中
{{data.title}}
{{child.title}}
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
export default {
name: "ReSubMenu",//可以使用递归组件
props:{
data:{
type:Object,//属性校验，为对象数据类型，并且如果没有赋值，默认给一个空对象
default:()=>({})
}
},
components:{
SubMenu,
MenuItem
}
}
复制代码
四、整合实现
{{menu.title}}
import Menu from './Menu'
import MenuItem from './MenuItem'
// import SubMenu from './SubMenu'
import ReSubMenu from './ReSubMenu'
export default {
data(){
return{
//这里的数据我就模拟一个了
menuList:[
{
title:'菜单1',
children:[
{
title:'菜单1-1',
children:[
{title:'菜单1-1-1'},
{title:'菜单1-1-2'},
{title:'菜单1-1-3'}
]
},
{title:'菜单1-2'},
{title:'菜单1-3'}
]
},
{title:'菜单2'},
{title:'菜单3'}
]
}
},
components:{
Menu,MenuItem,ReSubMenu
}
}
复制代码
注：本节部分语句参考 https://juejin.im/book/6844733759942557704/section/6844733760152272910。
vue 递归组件多级_Vue递归组件实现树形结构菜单相关推荐
- vue 递归组件多级_Vue 递归组件构建一个树形菜单
原标题:Vue 递归组件构建一个树形菜单 Vue.js 中的递归组件是一个可以调用自己的组件例如: Vue.component('recursive-component', { template: ` ...
- vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例 模仿v-model实现案例 我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例 这是父组件的东西.利用这个框改变值,看看有没 ...
- vue 组件数据共享_Vue共享组件
vue 组件数据共享 As a company, we sell experiences on many different sales channels, gotui.com, musement.c ...
- vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...
- php 递归生成树形菜单,递归生成树形结构菜单
public List listWithTree() { //1.查出所有菜单 List categoryEntities = categoryDao.selectList(null); //2.组装 ...
- vue 获取当前路由_VUE 在组件中 获取 路由信息
一.核心代码 1.获取参数 this.$route.query.id this.$route.query 2.页面跳转 登录 3.方法跳转 this.$router.push({ path: '/lo ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- vue 部门tree样式_vue+Element实现tree树形数据展示
简单粗暴是我的原则,方便复制粘贴是我的梦想!!! 效果如下 微信截图_20200710114604.png import { root } from '../../api/api'; export d ...
- mysql 查询多级类别_SQL处理多级分类,查询结果呈树形结构
对于多级分类常规的处理方法,很多程序员可能是用程序先读取一级分类记录,然后通过一级分类循环读取下面的子分类 这样处理的弊端是:如果数据量大,子分类很多,达到4级以上,这方法处理极端占用数据库连接池 对 ...
最新文章
- smarty mysql demo_PHP Smarty模版简单使用方法
- KWrite 和 Kate 在 Linux 上的应用
- 年度总结和计划：去年4个1，今年5个1
- mycat快速体验（转）
- python上下文管理器
- 关于RTP和SRT之间的互操作性，你需要了解什么？
- DWA泊车算法的实现
- c语言会生成class文件,一文带你刨析class文件
- Gitter - 高颜值GitHub小程序客户端诞生记 1
- Smartmail外贸CRMBuild1.0版系统白皮书
- 这个 SpringCloud+Vue 在线教育系统，牛得起飞！
- python三级菜单的实现
- G33/G31芯片最佳分辨率1440×900
- STM32单线串口对总线舵机的控制
- 基于ENVI下的土地利用信息提取（三）
- comparison of VLIW and superscaler
- 偶像的力量-松哥经典语录
- js设计模式--代理模式
- 黑苹果gtx1050显卡驱动问题
- 这有300+门刚刚开课的编程计算机科学免费课程大集合