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,一经查实,立即删除!

相关文章

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;给笔者提供更符合实际的…

记阿里云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不支持…

java面试题之SpringMVC篇

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

Vue中如何使用dayjs

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

迪萧科技有限公司邀您参观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模块实现上述部分…

【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功能测试 …

【EI会议征稿通知】第十届机械工程、材料和自动化技术国际会议(MMEAT 2024)

2024年第十届机械工程、材料和自动化技术国际会议(MMEAT 2024) 2024 10th International Conference on Mechanical Engineering,Materials and Automation Technology 2024年第十届机械工程、材料和自动化技术国际会议( MMEAT 2024) 将于2024年06月21-23日在中国武汉举行。MM…

docker自定义网络实现容器之间的通信

Background docker原理 docker是一个Client-Server结构的系统&#xff0c;Docker的守护进程运行在主机上。通过Socket从客户端访问。docker核心三大组件&#xff1a;image–镜像、container-容器、 repository-仓库。docker使用的cpu、内存以及系统内核等资源都是直接使用宿主…

最简单方式把jar打包成Windows服务

废话 &#x1f622; 将JAR文件转化为Windows服务是一种高效且常见的Java应用部署策略。这种转变赋予了Java应用程序在Windows操作系统上以无界面后台服务模式运行的能力&#xff0c;从而实现了持续、稳定且可靠的功能提供。这种部署方式不仅提升了应用的可用性&#xff0c…

导入excel某些数值是0

目录 导入excel某些数值是0数据全部都是0原因解决 部分数据是0原因解决 导入excel某些数值是0 数据全部都是0 有一列“工单本月入库重量”全部的数据都是0 原因 展示的时候&#xff0c;展示的字段和内表需要展示的字段不一致&#xff0c;导致显示的是0。 解决 修改展示的字…

kubernetes面试题及核心知识点

无状态负载deployment有状态管理 &#xff1a; config配置文件 secret密码文件 内置volumn插件 1、emptyDir宿主机的存储为容器分配资源。临时储存&#xff0c;随着pod的删除而消失&#xff0c; 2、hostPath宿主机的存储为容器分配资源。不会随着pod的删除而消失&#xf…

Video generation models as world simulators-视频生成模型作为世界模拟器

原文地址&#xff1a;Video generation models as world simulators 我们探索在视频数据上进行大规模生成模型的训练。具体来说&#xff0c;我们联合训练文本条件扩散模型&#xff0c;同时处理不同持续时间、分辨率和长宽比的视频和图像。我们利用一个在视频和图像潜在编码的时…

AGI|AI到底如何生成视频?Sora究竟为何能引爆科技圈?

目录 一、AI生成视频引发新浪潮 二、生成方法及难点 三、Sora的突破进展 &#xff08;一&#xff09;可生成不同尺寸视频 &#xff08;二&#xff09;可生成1分钟时长视频 &#xff08;三&#xff09;图片生成视频 &#xff08;四&#xff09;场景一致性 &#xff08;五…

Window部署Exceptionless

Exceptionless Elasticsearch 版本&#xff1a; Exceptionless&#xff1a;8.1.0 Elasticsearch&#xff1a;7.17.5 JDK&#xff1a;11.0.10 目录 一、Elasticsearch运行 二、 Exceptionless 一、Elasticsearch运行 bin目录下elasticsearch.bat 直接运行 访问 http://lo…