vue实现递归组件

news2024/9/23 9:31:46

父组件:

    <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.coloradmin.cn/o/1467985.html

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

相关文章

电脑闹钟软件哪个好用?

电脑闹钟软件哪个好用&#xff1f;一款带有闹钟定时提醒的备忘录软件是比较实用的&#xff0c;很多上班族每天都要处理堆积如山的工作&#xff0c;总是会忙于一件事的时候忘记另外一件事&#xff0c;导致效率极低。如当一项重要会议需要提前准备资料时&#xff0c;我们却忙于其…

【大厂AI课学习笔记NO.51】2.3深度学习开发任务实例(4)计算机视觉实际应用的特点

今天考试通过腾讯云人工智能从业者TCA级别的认证了&#xff01; 还是很开心的&#xff0c;也看不到什么更好的方向&#xff0c;把一切能利用的时间用来学习&#xff0c;总是对的。 我把自己考试通过的学习笔记&#xff0c;都分享到这里了&#xff0c;另外还有一个比较全的思维…

Java 模糊查询不用like,还可以用什么实现

在电商项目中&#xff0c;如果模糊查询用like的话&#xff0c;会给服务器带来很大的压力&#xff0c;导致服务器崩溃这都是有可能的&#xff0c;最开始做电商搜索框的时候&#xff0c;告诉我不可以用like&#xff0c;这对我来说&#xff0c;简直就是在为难我啊&#xff0c;可能…

Opencv实战(2)绘图与图像操作

Opencv实战(2)绘图与图像操作 指路前文&#xff1a;Opencv实战(1)读取与像素操作 三、基本绘图 文章目录 Opencv实战(2)绘图与图像操作三、基本绘图(1).line(2).rectangle(3).circle 四、图像处理(1).颜色空间1.意义2.cvtColor()3.inRange()4.适应光线 (2).形态操作1.腐蚀2.膨…

[VulnHub靶机渗透] FourandSix2.01

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

解决RabbitMQ管理页面异常/不正确的问题

正确的页面&#xff1a;有Channels、Exchanges等 异常/不正确的页面&#xff1a; 问题原因 我的RabbitMQ是用docker安装的&#xff0c;应该不会是安装的环境有问题。 而且MQ的服务确实是启动了&#xff0c;后端能正常使用&#xff0c;并且管理界面的登录页面也是能正常登录的&…

【软件测试】定位前后端bug总结+Web/APP测试分析

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

【蓝桥备赛】字串简写

字串简写 数据范围 字符串的长度为5*10的五次方&#xff0c;on方时间复杂度会很大。 才用动态规划的思想&#xff0c;dp[i]以i开头的的可能性&#xff0c;因为长度必须大于等于k&#xff0c;当i小于k的时候&#xff0c;如果等于第一个字符&#xff0c;s1时&#xff0c;dp[…

中兴通讯携吉林移动迈向5G-A新阶段,完成3CC技术应用

日前&#xff0c;中兴通讯携手中国移动吉林移动分公司&#xff0c;在5G-A领域取得新突破。具体来说&#xff0c;双方基于MTK芯片M80终端&#xff0c;完成了5G-A三载波聚合试点&#xff0c;实测下行速率达到理论峰值4.25Gbps&#xff0c;相比2.6G单载波速率提升2.5倍。如此成绩&…

C++多继承之菱形继承原理及解决方法

目录 1.单继承和多继承 2.菱形继承 3.虚继承解决菱形继承 3.1使用方法 3.2虚继承原理 4.继承和组合 1.单继承和多继承 一个子类只有一个父类称为单继承 一个子类有多个父类称为多继承 2.菱形继承 菱形继承是多继承的一种复杂的情况 这里会出现一个问题&#xff0c;Assi…

Axtue使用笔记

1、有三种方式可以设置元件顺序 第一种是鼠标右键点击顺序&#xff0c;选择调整操作置顶、置底、上移一层、下移一层&#xff1b; 第二种是在顶部工具栏中&#xff0c;选择调整操作置顶、置底、上移一层、下移一层; 第三种是使用快捷键操作 Windows&#xff1a;置顶&#xff1a…

持续集成,持续交付和持续部署的概念,以及GitLab CI / CD的介绍

引言&#xff1a;上一期我们部署好了gitlab极狐网页版&#xff0c;今天我们介绍一下GitLabCI / CD 目录 一、为什么要 CI / CD 方法 1、持续集成 2、持续交付 3、持续部署 二、GitLab CI / CD简介 三、GitLab CI / CD 的工作原理 4、基本CI / CD工作流程 5、首次设置 …

如何在Python中创建动态图形?

动态图形是使可视化更具吸引力和用户吸引力的好方法。它帮助我们以有意义的方式展示数据可视化。Python帮助我们使用现有强大的Python库创建动态图形可视化。Matplotlib是一个非常流行的数据可视化库&#xff0c;通常用于数据的图形表示&#xff0c;也用于使用内置函数的动态图…

springboot212球队训练信息管理系统

球队训练信息管理系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装球队训练信息管理系统软件…

Bert-VITS-2 效果挺好的声音克隆工具

持中日英三语训练和推理。内置干声分离&#xff0c;切割和标注工具&#xff0c;开箱即用。请点下载量右边的符号查看镜像所对应的具体版本号。 教程地址&#xff1a; sjj​​​​​​​CodeWithGPU | 能复现才是好算法CodeWithGPU | GitHub AI算法复现社区&#xff0c;能复现…

2024.02.24 跑步打卡第 6 天

能受天磨真铁汉&#xff0c;不遭人嫉是庸才 2024.02.24 跑步打卡第 6 天

【Vuforia+Unity】AR07-实现识别条码、二维码内容功能(Barcode Scanner)

Barcode Scanner in Unity | Vuforia Library官方教程,写的很详细,本教程主要参考对象! 主要实现扫描生活中常见的二维码,然后弹出二维码链接,当然我们也可以再次回调自定义函数,弹出数字内容,AR内容效果! 支持的二维码: 局限性 条码扫描组件还定义检测和跟踪的条形…

Docker Container(容器)

"在哪里走散&#xff0c;你都会找到我~" Docker 容器 什么是容器&#xff1f; 通俗来讲&#xff0c;容器是镜像运行的实体。我们对于镜像的认知是&#xff0c;“存储在磁盘上的只读文件”。当我们启动一个容器的本质&#xff0c;就是启动一个进程&#xff0c;即容器…

K线实战分析系列之五:刺透形态——多方反攻信号

K线实战分析系列之五&#xff1a;刺透形态——多方反攻信号 一、刺透形态二、类似刺透形态三、刺透形态的总结 一、刺透形态 阴线在前&#xff0c;阳线在后显示市场曾经跌到了低位&#xff0c;但是在盘中又将价格收回&#xff0c;并且多方收复了前一天大部分的失地 二、类似刺…

计算机设计大赛 深度学习卷积神经网络的花卉识别

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基…