vue实现递归组件

父组件:

    <Tree :data="data"></Tree>
import Tree from "@/components/Tree.vue";
const data = reactive([{name: "1",checked: true,children: [{name: "1-1",checked: false,},],},)

子组件:

<template><div class="tree" v-for="item in data" :key="item.name"><input v-model="item.checked" type="checkbox" /><span>{{ item.name }}</span><Tree v-if="item?.children?.length" :data="item?.children"></Tree></div>
</template><script setup>
let props = defineProps({data: Array,
});
</script>

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

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

相关文章

若依logback日志配置采坑

问题描述 若依使用的appender过滤器是level&#xff0c;如下述代码&#xff0c;这种过滤器只能导出级别为INFO的日志&#xff0c;warn和error都导出不出来。查询不是很方便。 <!-- 系统日志输出 --><appender name"file_info" class"ch.qos.logback.…

JAVA IDEA 项目打包为 jar 包详解

前言 如下简单 maven 项目&#xff0c;现在 maven 项目比较流行&#xff0c;你还没用过就OUT了。需要打包jar 先设置&#xff1a;点击 File > Project Structure > Artifacts > 点击加号 > 选择JAR > 选择From modules with dependencies 一、将所有依赖和模…

VirtualBox+Vagrant快速搭建Centos7

目录 安装VirtualBox&#xff1a; 安装Vagrant&#xff1a; 创建Vagrant项目目录&#xff1a; 初始化Vagrant配置文件&#xff1a; 本地Vagrantfile中的镜像名称&#xff1a; 启动虚拟机&#xff1a; SSH登录虚拟机&#xff1a; 备注&#xff1a;安装镜像的另一种方式是…

springmvc+ssm+springboot房屋中介服务平台的设计与实现 i174z

本论文拟采用计算机技术设计并开发的房屋中介服务平台&#xff0c;主要是为用户提供服务。使得用户可以在系统上查看房屋出租、房屋出售、房屋求购、房屋求租&#xff0c;管理员对信息进行统一管理&#xff0c;与此同时可以筛选出符合的信息&#xff0c;给笔者提供更符合实际的…

Autodesk CAD如何建立图层方框?

在AutoCAD中&#xff0c;要建立图层方框&#xff08;Layer Box&#xff09;可以通过以下步骤实现&#xff1a; 打开图层管理器&#xff1a; 在 AutoCAD 中&#xff0c;您可以通过输入“LA”命令或在菜单栏中选择“格式” > “图层管理器”来打开图层管理器对话框。 创建新图…

记阿里云mysql丢表丢数据的实践记录

第一时间挂工单&#xff0c;联系工程师指引&#xff0c;现在回过来想&#xff0c;第一时间要确认发生时间。 1.通过性能视图&#xff08;马后炮的总结&#xff0c;实际凭记忆恢复了三四次才找到数据&#xff09; 2.先恢复数据 通过Navicat工具&#xff0c;结构同步&#xff0…

解决IntelliJ IDEA 2023版本创建Spring项目时Java只能选择17或21的问题

问题描述&#xff1a; 当使用IntelliJ IDEA2023版本中Spring Initializr新建Spring项目时&#xff0c;即使JDK配置项为1.8&#xff0c;Java配置项仍然只能选17或21. 在JDK为1.8版本情况下&#xff0c;Java选择17或21&#xff0c;点击NEXT按钮&#xff0c;则会弹窗提示SDK不支持…

Sora: 开启AI视频创作的新纪元

随着人工智能技术的飞速进步&#xff0c;AI视频模型已迅速成为科技界的新焦点。在这股创新浪潮中&#xff0c;OpenAI推出的Sora&#xff0c;不仅以其前所未有的性能吸引了全球的目光&#xff0c;更以前瞻性的技术定义了AI视频领域的未来。Sora不仅是一个里程碑式的产品&#xf…

java面试题之SpringMVC篇

Spring MVC的工作原理 Spring MVC的工作原理如下&#xff1a; DispatcherServlet 接收用户的请求找到用于处理request的 handler 和 Interceptors&#xff0c;构造成 HandlerExecutionChain 执行链找到 handler 相对应的 HandlerAdapter执行所有注册拦截器的preHandler方法调…

音视频面试题集锦

下面是音视频开发面试题精选&#xff1a; 1、谈谈 iOS 音视频采集相关接口和数据结构的设计&#xff1f;2、如何降低处理音视频链路中的内存峰值&#xff1f;3、OpenGL 如何实现二分屏效果&#xff1f;4、使用 OpenGL 绘制时对于二维坐标需要注意什么&#xff1f; 1、谈谈 iO…

Vue中如何使用dayjs

Day.js中文网Day.js是一个极简的JavaScript库&#xff0c;可以为现代浏览器解析、验证、操作和显示日期和时间。https://dayjs.fenxianglu.cn/ 单位不区别大小写&#xff0c;支持复数和缩写形式 单位缩写描述 date D日期 [1,31]dayd星期 [0,6]&#xff08;星期日0&#xff0c…

云计算面试题【后期】

前言&#xff1a; 随着年龄的增长生活琐碎的事情、烦心的事情日渐增多&#xff0c;怠慢了更新&#xff0c; 1.什么是数据库 DB.DataBase 数据库&#xff1a; 依照某种数据模型进行组织并存放到存储器的数据集合 DBMS.DataBase Management System – 数据库管理系统&#xff1a;…

Java MP3转PCM

Java MP3转PCM 1 添加依赖2 Java 代码 1 添加依赖 <dependency><groupId>com.googlecode.soundlibs</groupId><artifactId>mp3spi</artifactId><version>1.9.5.4</version> </dependency>2 Java 代码 package com.xu.music.…

迪萧科技有限公司邀您参观2024生物发酵展

参展企业介绍 浙江迪萧科技有限公司位于浙江杭州&#xff0c;是一家专注于膜技术的国家高新企业。公司针对食品饮料、医药保健等领域的过程分离与控制、产品提取及浓缩、废料资源化利用等提供全方案解决服务。坚持以“顾客至上、优质服务、卓越品质”为原则。为客户企业提供清…

视频批量瘦身:一键缩小尺寸,轻松处理海量视频

在如今视频内容爆炸的时代&#xff0c;无论是个人创作者还是企业团队&#xff0c;都面临着处理大量视频的需求。而视频尺寸过大往往会导致上传缓慢、存储空间不足等问题。为了解决这个问题&#xff0c;我们推出了一款强大的视频批量剪辑工具&#xff0c;让你轻松实现视频尺寸批…

NXP实战笔记(七):S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…

Spring Cache框架使用教程,通过简单且强大的方式在应用程序中使用缓存提高性能

Spring Cache Spring Cache 框架是 Spring 框架的一部分,它提供了一种简单但功能强大的方式来在应用程序中实现缓存。下面是 Spring Cache 框架的一些好处: 性能提升: 使用缓存可以大大提高应用程序的性能,特别是对于那些需要频繁访问和计算的数据。通过缓存先前计算的结果…

【ARMv8M Cortex-M33 系列 8.1 -- RT-Thread 堆内存 检查命令 free 实现及介绍】

文章目录 RT-Thread 堆内存 检查命令 free 实现及介绍rt_memory_info 函数验证 RT-Thread 堆内存 检查命令 free 实现及介绍 在RT-Thread系统中&#xff0c;通常可以通过rt_memory_info函数获取当前的堆内存使用信息&#xff0c;然后你可以包装这个函数来显示剩余的堆空间。rt…

最全整理,软件测试-Web页面测试思路总结,13年经验...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Web功能测试 …

Vim 模式切换 | 命令集

Vim 模式切换 | 命令集 vim 主要模式及切换一、正常/普通/命令模式1 光标相关操作命令集1.1 光标移动1.2 文字删除1.3 粘贴和复制1.4 替换1.5 字符更改 二、插入模式2.1 插入模式和命令行模式相互切换 三、末行模式2.1 末行模式和命令行模式相互切换2.2 末行模式相关命令集 vim…