当前位置: 首页 > 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;并输出。…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...