当前位置: 首页 > news >正文

vue3——递归组件的使用

  • 该文章是在学习 小满vue3 课程的随堂记录
  • 示例均采用 <script setup>,且包含 typescript 的基础用法

一、使用场景

递归组件 的使用场景,如 无限级的菜单 ,接下来就用菜单的例子来学习

二、具体使用

先把菜单的基础内容写出来再说

父组件

<Tree :data="mock" />
// 引入子组件
import Tree from "../components/17_组件/Tree.vue";// 菜单的数据格式
interface ITree {name: string;checked: boolean;children?: ITree[];
}
// 数据 mock
const mock: ITree[] = [{name: "1",checked: false,children: [{name: "1-1",checked: true,},],},{name: "2",checked: false,},{name: "3",checked: false,children: [{name: "3-1",checked: false,children: [{name: "3-1-1",checked: true,},],},],},
];

子组件

<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px"><input type="checkbox" v-model="item.checked" />{{ item.name }}
</div>
<script setup lang="ts">
// 这里为了方便直接拷贝过来了,实际项目中要抽离出来复用
interface ITree {name: string;checked: boolean;children?: ITree[];
}
// props 定义
defineProps<{data?: ITree[];
}>();
</script>

如图,上述代码已经完成了 第一层 菜单数据的渲染:

在这里插入图片描述

深层 的菜单数据,就要用到 递归组件 了,递归组件有以下 三种 使用方式

1、直接使用 自己的文件名 作为 组件名称,不需要引入

当前的文件名称是 Tree.vue,所以直接使用 Tree 即可

子组件

<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px"><input type="checkbox" v-model="item.checked" />{{ item.name }}<!-- 需要注意:需要按照格式传入子组件要用的数据,并且加上递归的判断条件 --><Tree v-if="item?.children?.length" :data="item.children"></Tree>
</div>

使用结果如下:

在这里插入图片描述

2、子组件中再定义一个 script,并暴露出 name

子组件

<script lang="ts">
// 再起一个 script(lang必须保持一致),用来定义该组件的 name
export default {name: "TreeVue",
};
</script>

使用时,就可以用自定义的组件名

<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px"><input type="checkbox" v-model="item.checked" />{{ item.name }}<!-- 深层数据 --><TreeVue v-if="item?.children?.length" :data="item.children"></TreeVue>
</div>

渲染结果一致:

在这里插入图片描述

3、使用 defineOptions 自定义组件名

  • Vue3.3 增加了 defineOptions 方法,用来定义 optionsAPI 中的选项,比如组件名称 name(老一点的 vue 版本要装插件才能使用 defineOptions)
  • 与上面第二种思路一致,就是起个名再用

子组件

<script setup lang="ts">
interface ITree {name: string;checked: boolean;children?: ITree[];
}
defineProps<{data?: ITree[];
}>();// 直接在原有的 script 中进行自定义
defineOptions({name: "Self",
});
</script>
<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px"><input type="checkbox" v-model="item.checked" />{{ item.name }}<!-- 深层数据 --><Self v-if="item?.children?.length" :data="item.children"></Self>
</div>

渲染结果仍然一致,不再赘述

相关文章:

vue3——递归组件的使用

该文章是在学习 小满vue3 课程的随堂记录示例均采用 <script setup>&#xff0c;且包含 typescript 的基础用法 一、使用场景 递归组件 的使用场景&#xff0c;如 无限级的菜单 &#xff0c;接下来就用菜单的例子来学习 二、具体使用 先把菜单的基础内容写出来再说 父…...

【爬虫练习之glidedsky】爬虫-基础1

题目 链接 爬虫的目标很简单&#xff0c;就是拿到想要的数据。 这里有一个网站&#xff0c;里面有一些数字。把这些数字的总和&#xff0c;输入到答案框里面&#xff0c;即可通过本关。 思路 找到调用接口 分析response 代码实现 import re import requestsurl http://www.…...

计算机视觉入门 1)卷积分类器

目录 一、卷积分类器&#xff08;The Convolutional Classifer&#xff09;训练分类器 二、【代码示例】汽车卡车图片分类器步骤1. 导入数据步骤2 - 定义预训练模型步骤3 - 连接头部步骤4 - 训练模型 一、卷积分类器&#xff08;The Convolutional Classifer&#xff09; 卷积…...

SpringBoot 配置优先级

一般而言&#xff0c;SpringBoot支持配置文件进行配置&#xff0c;即在resources下的application.properties或application.yml。 关于配置优先级而言&#xff0c; application.properties>application.yml>application.yaml 另外JAVA程序程序还支持java系统配置和命令行…...

钢筋的形变屈服度测量

钢筋力学性能检测方法与检测报告《建筑材料检测技术》杨丛慧 建筑形变检测锚点&#xff0c;本身无实质内容。 建筑的倾角和形变检测方法&#xff0c;工程测量学&#xff0c;李章树 毫米级的卫星位移定位 挠度检测。 赛格事件&#xff1a;SHM-Structural Health Monitoring…...

【BASH】回顾与知识点梳理(三十七)

【BASH】回顾与知识点梳理 三十七 三十七. 基础系统设定与备份策略37.1 系统基本设定网络设定 (手动设定与 DHCP 自动取得)手动设定 IP 网络参数(nmcli)自动取得 IP 参数(dhcp)修改主机名(hostnamectl) 37.2 日期与时间设定时区的显示与设定时间的调整用 ntpdate 手动网络校时 …...

智慧农场云养猪平台原来是这样的!

随着数字化和智能化的发展&#xff0c;农业行业也逐渐开始融入互联网技术&#xff0c;其中云养猪平台作为新兴的农业数字化解决方案之一&#xff0c;备受关注。本文将探讨如何开发一款具备专业、思考深度和逻辑性的云养猪平台。 一、前期准备阶段&#xff1a; 1.明确目…...

【3Ds Max】可编辑多边形“边界”层级的简单使用

目录 示例 &#xff08;1&#xff09;挤出 &#xff08;2&#xff09;插入顶点 &#xff08;3&#xff09;切角 &#xff08;4&#xff09;利用所选内容创建图形 &#xff08;5&#xff09;封口 &#xff08;6&#xff09;桥 示例 这里我们首先创建一个长方体&#xff…...

Rancher-RKE2-安装流程

一、什么是rke2&#xff1f; 1.rke2是Rancher的下一代k8s发行版&#xff0c; 二、与rke的不同 1.重要的是&#xff0c;RKE2 不像 RKE1 那样依赖 Docker。RKE1 利用 Docker 来部署和管理控制平面组件以及 Kubernetes 的容器运行时间。RKE2 将控制平面组件作为静态 pod 启动&…...

OrienterNet: visual localization in 2D public maps with neural matching 论文阅读

论文信息 题目&#xff1a;OrienterNet: visual localization in 2D public maps with neural matching 作者&#xff1a;Paul-Edouard Sarlin&#xff0c; Daniel DeTone 项目地址&#xff1a;github.com/facebookresearch/OrienterNet 来源&#xff1a;CVPR 时间&#xff1a…...

iOS导航栏闪屏以及statusBar背景色的更改

1.如果导航栏有卡顿或者闪屏效果出现&#xff0c;多半是因为导航栏背景为透明色所致&#xff0c;可以给导航栏设置主题色&#xff0c;比如已白色为例 self.navigationController.navigationBar.backgroundColor [UIColor whiteColor]; 2.但是即使上述设置后&#xff0c;依然发…...

Centos开启防火墙和端口命令

Centos开启防火墙和端口命令 1. 开启查看关闭firewalld服务状态2. 查看端口是否开放3. 新增开放端口4. 查看开放的端口 1. 开启查看关闭firewalld服务状态 #启动/关闭firewall systemctl start/stop firewalld #查看防火墙状态 systemctl status firewalld #禁用或者启用 syst…...

基于微信小程序的宠物领养平台的设计与实现(Java+spring boot+微信小程序+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于微信小程序的宠物领养平台的设计与实现&#xff08;Javaspring boot微信小程序MySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java…...

Mongodb基础操作

一、简介 MongoDB是一个NoSQL型的数据库&#xff0c;基于分布式文档型储存数据库&#xff0c;由C语言编写&#xff0c;它的特点是开源、高性能、高可用、高扩展、易部署。支持 Golang、RUBY、PYTHON、JAVA、C、PHP等多种开发语言。 二、应用场景 MongoDB适用于高并发读写、数据…...

数据结构与算法:计算机科学的基石

文章目录 数据结构&#xff1a;构建数据的框架算法&#xff1a;问题的解决方案编程语言&#xff1a;实现数据结构的工具结论 &#x1f389;欢迎来到数据结构学习专栏~数据结构与算法&#xff1a;计算机科学的基石 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&…...

曲线救国 | 双非渣硕的秋招路

作者 | 带带大兄弟 面试锦囊之面经分享系列&#xff0c;持续更新中 欢迎后台回复"面试"加入讨论组交流噢 一篇旧文&#xff0c;可以参考~ 写在前面 双非渣硕&#xff0c;0实习&#xff0c;3篇水文&#xff0c;三个给老板当打工仔的nlp横向项目&#xff0c;八月份开…...

气传导耳机怎么样?四款值得入手的气传导耳机推荐

​随着科技的进步&#xff0c;蓝牙耳机越来越受欢迎。类型也越来越多&#xff0c;其中气传导耳机因其不入耳设计&#xff0c;佩戴更舒适&#xff0c;音质更自然&#xff0c;能够提供更为清晰、自然的音质。面对还不知如何挑选气传导耳机的用户&#xff0c;在这里&#xff0c;我…...

HTML <svg> 标签

实例 画一个圆: <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>页面下方有更多 TIY 实例。…...

Python随机密码生成。编写程序,在26个字母大小写和10个数字随机生成10个8位密码。

题目&#xff1a;随机密码生成。编写程序&#xff0c;在26个字母大小写和10个数字随机生成10个8位密码。 样例&#xff1a;类似AB12cdHi的十组8位密码。 代码&#xff1a; import random def passwords():a, b, c ord(a), ord(A), ord(1)r list(range(a , a 26)) list(ra…...

数据结构作业——哈夫曼树

/*【基本要求】 &#xff08;1&#xff09; 从文件中读出一篇英文文章&#xff0c;包含字母和空格等字符。 &#xff08;2&#xff09; 统计各个字符出现的频度。 &#xff08;3&#xff09; 根据出现的频度&#xff0c;为每个出现的字符建立一个哈夫曼编码&#xff0c;并输出。…...

告别CANFD高速丢帧!手把手教你配置STM32 FDCAN的收发器延时补偿(TDC)

攻克CANFD高速通信难题&#xff1a;STM32 FDCAN延时补偿实战指南 当CANFD的波特率飙升至10Mb/s时&#xff0c;许多工程师突然发现原本稳定的通信开始频繁丢帧——这往往不是代码逻辑问题&#xff0c;而是物理层信号延时在作祟。本文将带您深入STM32 FDCAN的Transceiver Delay C…...

SQL入门学习笔记

一、一些必备“常识” 数据库是指任何相关信息得集合&#xff0c;可以用不同的方式存储。&#xff08;如&#xff1a;电话簿&#xff0c;购物清单&#xff09; 两种主要的数据库类型&#xff1a;关系型数据库(SQL)例如mysql,postgresql(pg)与非关系型数据库(NoSQL)例如mogodb…...

注CO2驱替煤层气THM耦合模型与自定义PDE耦合固体力学

注co2驱替煤层气THM耦合模型 自定义pde耦合固体力学今天&#xff0c;我来分享一下关于CO2驱替煤层气的THM&#xff08;热-水-力学&#xff09;耦合模型的构建过程。这个模型听起来有点复杂&#xff0c;但其实拆开来理解&#xff0c;每一步都还挺有意思的。尤其是其中涉及的自定…...

企业级实验室信息管理系统:SENAITE LIMS 实战深度解析与部署指南

企业级实验室信息管理系统&#xff1a;SENAITE LIMS 实战深度解析与部署指南 【免费下载链接】senaite.lims SENAITE Meta Package 项目地址: https://gitcode.com/gh_mirrors/se/senaite.lims SENAITE LIMS 是一款基于 Plone 和 Python 构建的开源实验室信息管理系统&a…...

AI写专著必备:优质工具大盘点,全方位提升专著撰写效率

撰写学术专著时&#xff0c;研究者需要在“内容的深度”和“覆盖的广度”之间找到一个恰当的平衡&#xff0c;而这正是许多人面临的主要难题。从深度出发&#xff0c;专著的核心论点需要具备足够的学术分量&#xff0c;不仅要清楚解答“是什么”&#xff0c;还应该深入探讨“为…...

像素幻梦·创意工坊效果展示:从文本描述到可编辑PSD分层像素图的生成能力

像素幻梦创意工坊效果展示&#xff1a;从文本描述到可编辑PSD分层像素图的生成能力 1. 像素艺术的新纪元 在数字艺术创作领域&#xff0c;像素艺术一直保持着独特的魅力。传统的像素画创作需要艺术家逐格绘制&#xff0c;耗时耗力。而如今&#xff0c;像素幻梦创意工坊&#…...

《Origin画百图》之矩阵散点图进阶:从数据洞察到模型诊断

1. 矩阵散点图在数据科学中的进阶价值 第一次接触矩阵散点图时&#xff0c;我只把它当作一个简单的可视化工具。直到在一次房价预测项目中&#xff0c;我发现这个看似基础的图表竟然能帮我发现数据中的多重共线性问题&#xff0c;才真正意识到它的威力。矩阵散点图就像数据科学…...

语音控制扩展:让OpenClaw通过nanobot响应语音指令

语音控制扩展&#xff1a;让OpenClaw通过nanobot响应语音指令 1. 为什么需要语音控制OpenClaw 作为一个长期使用OpenClaw的开发者&#xff0c;我一直在思考如何让这个强大的自动化工具更加"人性化"。键盘鼠标操作固然精确&#xff0c;但在某些场景下——比如双手被…...

Gin 日志体系详解

Gin 日志体系详解 本文基于 Gin 企业开发的真实场景&#xff0c;从原生日志能力到主流日志工具选型&#xff0c;全程以实用为核心&#xff0c;附带可直接复制的集成代码、最佳实践和踩坑指南&#xff0c;解决 Gin 开发中日志的全场景需求。 一、Gin 原生日志体系详解 Gin 自带了…...

SDMatte抠图质量评估:Alpha Matte精度与PNG透明通道一致性

SDMatte抠图质量评估&#xff1a;Alpha Matte精度与PNG透明通道一致性 1. SDMatte模型概述 SDMatte是一款专注于高质量图像抠图的AI模型&#xff0c;特别擅长处理以下场景&#xff1a; 主体与背景的精细分离透明或半透明物体的提取复杂边缘的精修处理商品图片的背景去除 该…...