vue3递归组件---树形组件

第一种方式,直接自己调用自己

Tree.vue

<template><div class="tree"><div v-for="(item, index) in data" :key="item.name">每一层 {{ item.name }}<Tree v-if="item?.children?.length" :data='item.children' /></div></div>
</template><script setup lang="ts">
//递归的第一种方式 直接引入自己
import Tree from './Tree.vue'
import { TreeList } from '../ts/type'
type Props = {data?: TreeList[]
}
defineProps<Props>();
</script><style scoped>
.tree {margin-left: 20px;border-left: 2px #01847f dashed;
}
</style>

App.vue 里模拟树形数据,使用递归组件

<template><div><Tree :data='data'/></div>
</template><script setup lang="ts">
import Tree from './components/Tree.vue'
import { reactive } from 'vue'
import {TreeList } from './ts/type'
const data = reactive<TreeList[]>([{name: 'no.1',children: [{name: 'no.1-1',children: [{name: 'no.1-1-1',children:[]}]},],}, {name:'no.2'}, {name: 'no.3',children: [{name:'no.3-1'}]}])
</script><style scoped></style>

type.ts 属性数据的结构

export type TreeList = {name: string //名称icon?: string //图标可有可无children?: TreeList[] | [] //子节点 可有可无 还可能传空数组
}

第二种方式,export 一个name出去

第二种方式 就是像vue2 一样 export一个name出去

但是setup 语法糖下没办法使用 export

我们只需要再定义一个script标签就可以了

<template><div class="tree"><div v-for="(item, index) in data" :key="item.name">每一层 {{ item.name }}<Tree v-if="item?.children?.length" :data='item.children' /></div></div>
</template><script setup lang="ts">
import { TreeList } from '../ts/type'
type Props = {data?: TreeList[]
}
defineProps<Props>();
</script>
<!-- 第二种方式 就是像vue2 一样 export一个name出去但是setup 语法糖下没办法使用 export 我们只需要再定义一个script标签就可以了-->
<script lang="ts">
export default {name:'Tree'
}
</script><style scoped>
.tree {margin-left: 20px;border-left: 2px #01847f dashed;
}
</style>

效果图

我们还可以给树形递归的组件添加参数传递事件

要注意在树形组件的里层也得添加自定义事件

并且这个自定义事件传的函数很有讲究

Tree.vue

<template><div class="tree"><div @click.stop="clickTreeItem(item)" v-for="(item, index) in data" :key="item.name">每一层 {{ item.name }}<Tree  @get-tree-item="clickTreeItem" v-if="item?.children?.length" :data='item.children' /><!-- Tree 组件不添加这个自定义事件的话  那么就只有最外层的根节点会向外传递数据 --><!-- 注意此处派发的函数clickTreeItem没有传item参数了如果传了就相当于给树形组件(递归组件)的上级派发信息 没办法从外部拿到子节点所传递的数据了 --><!--   @get-tree-item="clickTreeItem(item)"  写成这种形式的话  递归组件会依次向上层传递事件   --><!-- 不传item的执行结果如下 --><!--子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}父组件得到的item Proxy {name: 'no.1-1-1', children: Array(0)} --><!-- 传item的执行的结果如下 --><!-- 子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}子组件派发的item Proxy {name: 'no.1-1', children: Array(1)}子组件派发的item Proxy {name: 'no.1', children: Array(1)}父组件得到的item Proxy {name: 'no.1', children: Array(1)} --></div></div>
</template><script setup lang="ts">
import { TreeList } from '../ts/type'
type Props = {data?: TreeList[]
}
defineProps<Props>();const emit =   defineEmits(['getTreeItem'])
const clickTreeItem=(item:TreeList)=>{console.log('子组件派发的item', item)emit('getTreeItem',item)
}
</script>
<!-- 第二种方式 就是像vue2 一样 export一个name出去但是setup 语法糖下没办法使用 export 我们只需要再定义一个script标签就可以了-->
<script lang="ts">
export default {name:'Tree'
}
</script><style scoped>
.tree {margin-left: 20px;border-left: 2px #01847f dashed;
}
</style>

App.vue

<template><div><Tree :data='data' @get-tree-item="getTreeItem"/></div>
</template><script setup lang="ts">
import Tree from './components/Tree.vue'
import { reactive } from 'vue'
import {TreeList } from './ts/type'
const data = reactive<TreeList[]>([{name: 'no.1',children: [{name: 'no.1-1',children: [{name: 'no.1-1-1',children:[]}]},],}, {name:'no.2'}, {name: 'no.3',children: [{name:'no.3-1'}]}])const getTreeItem = (item:TreeList) => {console.log('父组件得到的item',item)
}
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/208455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux如何清空文件内容

在做系统运维工作时&#xff0c;有时会发现一个问题&#xff1a;某些存储空间的使用率过高。换句话说就是空间快被堆满了&#xff0c;需要释放空间。大多数情况下&#xff0c;导致空间不足的罪魁祸首通常是一些log日志文件。对于某些特殊系统来说&#xff0c;日志文件还不能直接…

AGM离线下载器使用说明

AGM专用离线下载器示意图&#xff1a; 供电方式&#xff1a; 通过 USB 接口给下载器供电&#xff0c;跳线 JP 断开。如果客户 PCB 的 JTAG 口不能提供 3.3V 电源&#xff0c;或仅需烧写下载器&#xff0c;尚未连接用户 PCB 时&#xff0c;采用此种方式供电。 或者&#xff1a…

Linux中的网络时间服务器

本章主要介绍网络时间的服务器 使用chrony配置时间服务器配置chrony客户端服务器同步时间 1.1 时间同步的重要性 一些服务对时间要求非常严格&#xff0c;例如如图所示的由三台服务器搭建的ceph集群 这三台服务器的时间必须保持一致&#xff0c;如果不一致&#xff0c;就会显…

Django讲课笔记01:初探Django框架

文章目录 一、学习目标二、课程导入&#xff08;一&#xff09;课程简介&#xff08;二&#xff09;课程目标&#xff08;三&#xff09;适用人群&#xff08;四&#xff09;教学方式&#xff08;五&#xff09;评估方式&#xff08;六&#xff09;参考教材 三、新课讲授&#…

android项目实战之编辑器集成

引言 项目需要用到编辑器&#xff0c;采用RichEditor&#xff0c;如下效果 实现 1. 引入库2 implementation jp.wasabeef:richeditor-android:2.0.0 2. XML <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width&q…

LeetCode:2008. 出租车的最大盈利(dp C++)

目录 2008. 出租车的最大盈利 题目描述&#xff1a; 实现代码与解析&#xff1a; DP 二分&#xff08;两种写法&#xff09; 原理思路&#xff1a; 2008. 出租车的最大盈利 题目描述&#xff1a; 你驾驶出租车行驶在一条有 n 个地点的路上。这 n 个地点从近到远编号为 1 …

如何使用 Wordpress?托管, 网站, 插件, 缓存

这是该系列教程的第一个教程&#xff0c;最终将在运行高性能 LEMP 堆栈的阿里云 ECS 实例上运行一个新的 WordPress 站点。 在本教程中&#xff0c;我们将创建一个运行 Ubuntu 16.04 的实例&#xff0c;然后通过创建超级用户并禁用 root 登录来保护服务器&#xff0c;最后配置…

持续集成交付CICD:使用Maven命令下载Nexus制品

目录 一、实验 1.Maven安装 2.Nexus搭建公共组仓库及Maven全局配置文件 3.使用Maven命令下载Nexus制品 一、实验 1.Maven安装 &#xff08;1&#xff09;CentOS环境安装步骤 tar -xf apache-maven-3.8.6-bin.tar.gz #解压 mv apache-maven-3.8.6 /usr/local/maven #移动…

如何进行更好的面试回复之缓存函数在项目中的性能优化?

缓存函数是一种提高函数性能的技术&#xff0c;在函数被调用时&#xff0c;会将计算结果缓存起来&#xff0c;以便在后续的调用中直接返回缓存的结果&#xff0c;从而减少了重复计算的时间。 缓存函数的实现通常包括两个步骤&#xff1a; 判断缓存是否存在&#xff1a;在函数被…

提取视频光流成帧并写入视频中

修改一下配置文件就可以运行了 配置文件 config.py video_path xxxx/dataset/data/huaping/BXDQ05-花屏-1.mp4#要处理的视频路径 frame_path xxxx/dataset/frame#处理成帧之后保存的路径 flow_path xxxx/dataset/flow#处理成光流之后保存的路径 save_video_path xxxx/fe…

自动补全的 select antd react

自动补全的 select antd react 文档&#xff1a;自动补全的 select antd react.note 链接&#xff1a;http://note.youdao.com/noteshare?idf5e4a93d2b9d6be8e459edd4eb86323b&sub19796E9BC04D4ABD9ACE325FDFF59B0E 添加链接描述 import React, { useState, useRef } from…

【1day】泛微e-office OA系统xml.php 文件 SORT_ID 参数 SQL 注入漏洞学习

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

理解传统模式与互联网时代 消费行为模型 AIDMA , AISAS , SICAS

1 AIDMA与AISAS 消费行为模型&#xff0c;以及所诞生的IT岗位 1.1 传统市场营销消费行为模型 AIDMA模型&#xff1a;Attention&#xff08;吸引&#xff09;&#xff0c;Interest &#xff08;兴趣&#xff09;&#xff0c;Desire&#xff08;欲望&#xff09; &#xff0c;Me…

LeetCode 76. 最小覆盖子串 滑动窗口框架

双指针的特殊应用&#xff1a;滑动窗口 代码 题目链接&#xff1a;https://leetcode.cn/problems/minimum-window-substring/description/ 不说废话&#xff0c;直接贴代码&#xff1a; static string minWindow(string s, string t) {// need记录需要匹配的字符串t中每个字…

❤ Mac IDEA使用并运行项目

❤ IDEA导入项目并运行 Mac IDEA使用 (1) 仓库导入 通过获取giett仓库包的url&#xff0c;在idea中导入项目 在gitee里获取项目的ur打开idea&#xff0c;点击 File->new->Project from Version Control (2) 创建数据库ry并导入数据脚本 &#xff08;3&#xff09;修改配…

华为配置Smart Link主备备份示例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它通过监控设备的上行接口…

npm私有源构建项目下载依赖报错

Jenkins构建项目报错&#xff0c;依赖找不到 Error: Couldnt find any versions for "babel/helper-module-imports" that matches "^7.22.15"at MessageError.ExtendableBuiltin (/data1/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/…

log4j(日志的配置)

日志一般配置在resources的config下面的&#xff0c;并且Util当中的initLogRecord中的initLog&#xff08;&#xff09;方法就是加载这个log4j.properties的. 首先先看log4j.properties的配置文件 log4j.rootLoggerdebug, stdout, Rlog4j.appender.stdoutorg.apache.log4j.Co…

高性能和多级高可用,云原生数据库 GaiaDB 架构设计解析

1 云原生数据库和 GaiaDB 目前&#xff0c;云原生数据库已经被各行各业大规模投入到实际生产中&#xff0c;最终的目标都是「单机 分布式一体化」。但在演进路线上&#xff0c;当前主要有两个略有不同的路径。 一种是各大公有云厂商选择的优先保证上云兼容性的路线。它基于存…

考研真题数据结构

【2021年山西大学真题】将二叉树中所有非终端结点的左右子树交换位置&#xff0c;可以得到原二叉树的 镜像二叉树&#xff0c;如图。假设二叉树的存储形式为&#xff08;lchild&#xff0c;data&#xff0c;rchild&#xff09;&#xff0c;给出求镜像二叉树的算法: &#xff0…