Vue递归组件实现树形控件示例与优化
32 浏览量
更新于2024-09-01
收藏 117KB PDF 举报
在Vue项目中，当遇到动态导航目录或需要创建可扩展的树形结构时，递归组件是一个非常实用的解决方案。初始时，作者尝试依赖Element UI提供的树形控件，但发现它在样式自定义和扩展性上存在局限性。由于Element UI的树形组件样式不易调整且难以扩展到多棵树，这不符合项目的实际需求。
vue官网文档中的递归组件概念启发了作者，递归组件允许组件内部调用自身，从而实现层级结构的动态渲染。作者意识到只需要编写一个通用的树形组件，通过递归调用来处理任意深度的树结构，这样就避免了为每棵树单独创建组件的繁琐工作。
下面是一段基本的Vue递归组件代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<div id="app">
<tree :folder="trees" :select="select"></tree>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('tree', {
name: 'tree',
template: `
<ul>
<li v-for="(item, index) in folder" @click="select(item)">
{{ item.label }}
<tree v-if="item.children" :folder="item.children" :key="index" />
</li>
</ul>
`,
props: {
folder: Array, // 接收树形数据
select: Function // 接收节点选择回调
}
});
new Vue({
el: '#app',
data: {
trees: [
{ label: '父节点1', children: [{ label: '子节点1' }, { label: '子节点2' }] },
{ label: '父节点2' } // 可以添加更多层级
]
}
});
</script>
</body>
</html>
```
在这个例子中，`tree`组件接收一个`folder`数组作为props，数组中的每个对象代表树的一级，包含`label`（节点名称）和`children`（子节点数组）。模板中使用`v-for`指令遍历每一级节点，并通过`v-if`条件判断是否显示子节点。点击节点时，`select`方法会被调用，用于处理节点的选择逻辑。
递归组件的优势在于它能够根据数据动态地渲染树形结构，使得代码更加简洁，易于维护和扩展。然而，要注意递归组件可能会导致性能问题，特别是在处理大量数据时，因此需要确保数据优化和适当的性能处理策略。此外，递归组件的使用也需要遵循Vue的数据驱动原则，确保数据变化时视图能够自动更新。
vue用递归组件写树形控件的实例代码用递归组件写树形控件的实例代码
最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都
可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现，调用完事之后，样式
不可控，而且要加东西特别困难，无法满足项目需求，于是，一首《凉凉》送给自己，后来去翻vue官网，发现居然有递归组
件，一开始我写了两个组件，互相调用，可以写出来，后来返现，如果项目要用到5棵树，我要写10个组件，而且样式控制起
来超级恶心，于是我就各种查资料，原生的也试过了，原生js写的并不能在vue项目中使用，因为它用js创造的元素，违反了
vue数据驱动视图的原则，所以pass，又听一遍《凉凉》，当然如果有小伙伴对原生js写的树形结构感兴趣我也可以贴出来，
那么我们先来看看vue版的吧，后来，我就一直在默念“递归”这个词，递归不就是自己调自己吗，我可以只写一个组件，来调
用自己啊，也许应该可以，后来，经过试验终于成功了，下面我贴上代码
vue版的树形控件版的树形控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>树形结构2</title>
</head>
<body>
<div id = "app">
<tree :folder = "trees" :select = "select"></tree>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('tree', {
name:"tree",
template:`<ul>
<li v-for = "item in folder">
<span @click = "select(item)">{{ item.label }}</span>
<tree v-if = "item.children" :folder = "item.children" :select = "select"></tree>
</li>
</ul>`,
props:["folder","select"],
})
// <tree v-if = "item.children" :folder = "item.children"></tree>
var app = new Vue({
el:"#app",
data:{
msg:"hello world",
trees: [
{
id:1,
label:"1级目录1",
show:false,
children:[
{
id:"1-1",
label:"1.1目录"
},
{
id:"1-2",
label:"1.2目录"
},
{
id:"1-3",
label:"1.3目录"
},
] },
{
id:2,
label:"1级目录2",
show:false
},
{
id:3,
label:"1级目录3",
show:false,
children:[
{
id:"3-1",
label:"3.1目录"
},
{
id:"3-2",
下载后可阅读完整内容，剩余6页未读，立即下载
2020-10-18 上传
2020-11-26 上传
2020-10-17 上传
2020-12-29 上传
点击了解资源详情
点击了解资源详情
2020-10-20 上传
2020-10-16 上传
2015-01-20 上传
weixin_38600341
- 粉丝: 6
- 资源: 959
我的内容管理
展开
最新资源
- BottleJS快速入门：演示JavaScript依赖注入优势
- vConsole插件使用教程：输出与复制日志文件
- Node.js v12.7.0版本发布 - 适合高性能Web服务器与网络应用
- Android中实现图片的双指和双击缩放功能
- Anum Pinki英语至乌尔都语开源词典：23000词汇会话
- 三菱电机SLIMDIP智能功率模块在变频洗衣机的应用分析
- 用JavaScript实现的剪刀石头布游戏指南
- Node.js v12.22.1版发布 - 跨平台JavaScript环境新选择
- Infix修复发布：探索新的中缀处理方式
- 罕见疾病酶替代疗法药物非临床研究指导原则报告
- Node.js v10.20.0 版本发布，性能卓越的服务器端JavaScript
- hap-java-client：Java实现的HAP客户端库解析
- Shreyas Satish的GitHub博客自动化静态站点技术解析
- vtomole个人博客网站建设与维护经验分享
- MEAN.JS全栈解决方案：打造MongoDB、Express、AngularJS和Node.js应用
- 东南大学网络空间安全学院复试代码解析
