Vue冷门技巧递归组件实践示例详解
作者:JetTsang 发布时间:2024-05-09 15:13:04
标签:Vue,递归,组件
痛点引出
在平时的开发当中,渲染侧边栏导航菜单有时会遇到过需要侧边栏有多层甚至无限层级的问题。此时更优雅的方式便是使用递归组件
<el-menu>
<template slot="title">
<i class="el-icon-location"></i>
<span>菜单</span>
</template>
<el-submenu index="1-1">
<template slot="title">子菜单</template>
<el-menu-item index="1-1-1">子菜单选项1</el-menu-item>
<el-submenu index="1-1-2">
<template slot="title">子菜单的子菜单</template>
<el-menu-item index="1-1-2-1">子菜单的子菜单的选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-submenu>
</el-menu>
可以看到这部分重复的代码可以完全抽离出来做单独的组件。
<el-submenu>
<el-menu-item></el-menu-item>
...
</el-submenu>
那么问题来了,在一层当中又有重复的submenu怎么办?显然这个层级是需要动态生成的。比如:
<el-submenu>
<el-menu-item></el-menu-item>
...
<el-submenu>
<el-menu-item></el-menu-item>
...
<el-submenu>
<el-menu-item></el-menu-item>
...
//这里省略很多很多层
</el-submenu>
</el-submenu>
</el-submenu>
很明显,这里需要可以用递归(recursive) 的思想来解决, 那么在template模版当中有办法做这样的组件吗?答案当然是可以,template模版语法也是支持递归。
源码中的体现
先找找源码,我们在src/core/global-api.ts当中找到initExtend函数,这个函数是initGlobalAPI的一个执行步骤,每个组件创建的时候都会去调用。
可以看到如果命中name,则会给自己的components的配置项当中注册自己,使得可以在编译的时候可以识别到自己,从而在template模版语法当中去使用。
组件示例封装
首先定义数据结构能描述这样的菜单
[
{
id: '1',
title: '父菜单',
children:[
{id:'1-1',title:'子选项',children:[]},
{id:'1-1',title:'子菜单',children:[
{id:...,title:...,children:...},
...
]},
...
]
}
]
简单点描述就是
interface item:{
id: string,
title: string,
children: item[] | []
}
item[]
然后开始封装组件
// RescursiveMenu.vue
<template>
<el-submenu :index="menuItem.id" v-if="menuItem.children.length">
<template slot="title">{{ menuItem.title }}</template>
<template v-for="item in menuItem.children">
<RecursiveMenu :menuItem="item"/>
</template>
</el-submenu>
<el-menu-item v-else>{{ menuItem.title }}</el-menu-item>
</template>
<script>
export default {
name:"RecursiveMenu",
props: {
menuItem: Object
}
}
</script>
当然这只是简单示例demo,后续根据业务需求相信难不倒各位看官。
使用:
<el-submenu>
<template v-for="item in menuList.children">
<RecursiveMenu :menuItem="item" :key="item.id"/>
</template>
</el-submenu>
小扩展
同样的,vue也支持jsx/tsx语法 ,使用jsx则需要抽象需要重复的过程,封装成渲染函数来实现递归,这里采用整个数组渲染过程抽象重复,来实现递归。
//MyMenu.jsx
export default {
name:"RecursiveMenu",
props: {
menuList: Array,
dafault:()=>([])
},
render(){
const recursiveRender = (menuList)=>{
return menuList.map((menuItem)=>{
return menuItem.children.length > 0 ? (
<elSubmenu index="{menuItem.id}">
<div slot="title">{menuItem.title}</div>
{recursiveRender(menuItem.children)}
</elSubmenu>
):(
<elMenuItem key="{menuItem.id}">{ menuItem.title }</elMenuItem>
)
}
)
}
return (<elMenu>
{recursiveRender(this.menuList)}
</elMenu>
)
}
}
当然,如果想用jsx复刻上诉template当中抽象的逻辑,可以写成这样:
// RecursiveMenu.jsx
export default {
name:"RecursiveMenu",
props: {
menuItem: Object,
dafault:()=>({})
},
render(){
const recursiveRender = (menuItem)=>{
return menuItem.children.length > 0 ? (
<elSubmenu index="{menuItem.id}">
<div slot="title">{menuItem.title}</div>
{menuItem.children.map(children=>recursiveRender(children))}
</elSubmenu>
):(
<elMenuItem key="{menuItem.id}">{ menuItem.title }</elMenuItem>
)
}
return recursiveRender(this.menuItem)
}
}
来源:https://juejin.cn/post/7206912311562043451
0
投稿
猜你喜欢
- 简介正则表达式本身是一种小型的、高度专业化的编程语言,而在python中,通过内嵌集成re模块,程序媛们可以直接调用来实现正则匹配。正则表达
- import os import sys import string #以指定模式打开指定文件,获取文件句柄 def getFileIns(
- Plotly Express是对 Plotly.py 的高级封装,内置了大量实用、现代的绘图模板,用户只需调用简单的API函数,即可快速生成
- 运行以下代码: Dim com As ADODB.Command Dim rst
- 内容摘要:网页设计师制作网页最常用的设计软件应该就算adobe的产品Photoshop了,当然Photoshop不仅可以设计网页,不过作为网
- Matplotlib编程实现import matplotlib.pyplot as pltimport numpy as npfrom ma
- 1. 索引及切片数组中的元素可以通过索引以及切片的手段进行访问或者修改,和列表的切片操作一样。下面直接使用代码进行实现,具体操作方式以及意义
- 首先是三张表, CNo对应的是课程,在这里我就粘贴了。主表人名表按照常规查询SELECT s.SName, c.CName,s2.SCgra
- Allure除了具有Pytest基本状态外,其他几乎所有功能也都支持。1、严重性如果你想对测试用例进行严重等级划分,可以使用@allure.
- 你一定很喜欢像QQ或者MSN好友登录提示的效果吧,那么怎么样能在网页中实现呢?asp之家为大家找到了这
- 主函数(Main Function)是程序中最重要的部分之一,它是程序入口点,也是程序开始执行的地方。1、主函数的定义在 Python 中,
- 前言前面一直使用命令行运行pytest用例,本篇来学下使用pytest.main()来运行测试用例pytest.main()args 传一个
- 本文实例为大家分享了python控制nao机器人身体动作的具体代码,供大家参考,具体内容如下今天读的代码,顺便写了出来,与文档的对比,差不多
- 修改闭包内使用的外部变量错误示例:# 定义一个外部函数def func_out(num1): # 定义一个内部函数
- 这篇文章是读者朋友的python协程的学习经验之谈,以下是全部内容:协程的历史说来话长,要从生成器开始讲起。如果你看过我之前的文章pytho
- 选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容Bootstrap框架中的选项卡主要有两部分内容组
- 摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个
- 网上大部分都是上传文件,于是个人参照网上一些博客的内容,写了一个把windows上目录上传到远程linux的一个小程序。下面是代码:clas
- 参数数量及其作用该函数共有十一个参数,常用的有:名称 name变量规格 shape变量类型 dtype变量初始化方式 initializer
- 本文实例讲述了python有证书的加密解密实现方法。分享给大家供大家参考。具体实现方法如下:最近在做python的加解密工作,同时加完密的串