【Vue3】递归组件

1. 递归组件mock数据

App.vue

<template><div><Tree :data="data"></Tree></div>
</template><script setup lang="ts">
import { reactive } from 'vue';
import Tree from './components/Tree.vue';
interface Tree {name: string,checked: boolean,children?: Tree[]
}
const data = reactive<Tree[]>([{name: '1',checked: true,children: [{name: '1-1',checked: false}]},{name: '2',checked: true,},{name: '3',checked: false,children: [{name: '3-1',checked: false,children: [{name: '3-1-1',checked: false},{name: '3-1-2',checked: true},],}]},])
</script><style lang="scss" scoped></style>

2. 递归组件定义名称

子组件Tree.vue

<template><div class="tree" v-for="item in data"><input v-model="item.checked" type="checkbox"> <span>{{ item.name }}</span>// 1.模板自定义名称 直接使用文件名当做递归组件的名称 Tree<Tree v-if="item?.children?.length" :data="item?.children"></Tree></div>
</template><script setup lang="ts">
// import { ref,reactive } from 'vue';
interface Tree {name: string,checked: false,children?: Tree[]
}// // 3.模板自定义名称 利用defineOptions
// defineOptions({
//   name: 'nihao'
// })defineProps<{data?: Tree[]
}>()
</script><!-- // 2.模板自定义名称
<script lang="ts">
//可以将模板中的Tree改名为“nihao”
export default {name: "nihao"
}
</script> --><style lang="scss" scoped>
.tree {margin-left: 10px;
}
</style>

3. 递归组件处理事件

子组件Tree.vue

<template><div @click.stop="clickTap(item,$event)" class="tree" v-for="item in data"><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 lang="ts">
// import { ref,reactive } from 'vue';
interface Tree {name: string,checked: false,children?: Tree[]
}defineProps<{data?: Tree[]
}>()const clickTap = (item:Tree,e) => {console.log(item, e.target);
}
</script><style lang="scss" scoped>
.tree {margin-left: 10px;
}
</style>

在这里插入图片描述

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

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

相关文章

【网络编程】I/O复用

文章目录 一、select系统调用1.1、文件描述符就绪条件&#xff08;socket可读条件&#xff09;1.2、处理带外数据 二、poll系统调用三、epoll系列系统调用3.1、内核事件表3.2、epoll_wait函数3.3、LT和ET模式3.4、EPOLLONESHOT事件 四、select、poll、epoll三组I/O复用函数比较…

路由的配置

1、在router中设置路由导航跳转函数,在index.js文件中写这句话&#xff1a; 1.1 只要发生跳转, 就会调用这个函数&#xff1a; 1.2 导航的声明函数 2、访问系统访问控制系统如何形成 3、来一个导航守卫的案例&#xff1a;看看导航守卫的案例&#xff0c;写一个Main.Vue 和login…

超简单的fastapi链接websocket用例

main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…

sky-notes-02

11、HttpClient HttpClient作用&#xff1a; 发送HTTP请求接收响应数据 HttpClient的maven坐标&#xff1a; <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</vers…

springmvc登录拦截器

Ioc和Aop是spring的两大重要思想&#xff0c;前者指的是控制反转&#xff08;Invers of control&#xff09;后者指的是面向切面编程&#xff08;Aspect oriented programing&#xff09;。aop的一大作用就是能将很多重复的功能点抽取出来&#xff0c;而用注解或者配置的方式统…

docker启动容器报错

报错信息 [rootDream soft]# docker run -it -d -p 8080:8080 tomcat eec9fab6b9ca06d2bbf1467aef05d8020ee60448978e10ac20c38888934f0a0b docker: Error response from daemon: driver failed programming external connectivity on endpoint hungry_euclid (163242f0079e72…

关于c++中虚函数和虚函数表的创建时机问题

以这段代码为例。 #include <iostream>using namespace std;class Parent { public:Parent(){}virtual void func1() {};virtual void func2() {}; };class Child :public Parent { public:Child():n(0),Parent(){cout << "Child()" << endl;}vir…

如何建立ftp server?快解析内网穿透实现外网直接访问

serveru是一款由Rob Beckers开发的获奖的ftp服务器软件&#xff0c;全称为&#xff1a;serv-u ftp server&#xff0c;它功能强大又易于使用。ftp服务器用户通过它用ftp协议能在internet上共享文件。serv-u不仅100%遵从通用ftp标准&#xff0c;也包括众多的独特功能可为每个用户…

Android getevent用法详解

TP驱动调试分享——基于Qualcomm SDM710平台Android9.0&#xff0c;TP 采用I2C方式和CPU进行通信_高通tp驱动_永恒小青青的博客-CSDN博客 手机触摸屏扫描信号实测波形_触摸屏报点率_AirCity123的博客-CSDN博客 如何查看TP报点率&#xff1f;触摸TP查看详细信息 adb shell ge…

音视频——视频流H264编码格式

1 H264介绍 我们了解了什么是宏快&#xff0c;宏快作为压缩视频的最小的一部分&#xff0c;需要被组织&#xff0c;然后在网络之间做相互传输。 H264更深层次 —》宏块 太浅了 ​ 如果单纯的用宏快来发送数据是杂乱无章的&#xff0c;就好像在没有集装箱 出现之前&#xff0c;…

【Rust教程 | 基础系列 | Rust初相识】Rust简介与环境配置

教程目录 前言一&#xff0c;Rust简介1&#xff0c;Rust的历史2&#xff0c;Rust的特性3&#xff0c;为什么选择Rust 二&#xff0c; Rust环境配置1&#xff0c;windows11安装2&#xff0c;Linux安装 三&#xff0c;安装IDE 前言 Rust是一种系统编程语言&#xff0c;专注于速度…

U盘安装CentOS7.9出错:进入 dracut问题和解决方法

U盘安装CentOS7.9出错&#xff1a;进入 dracut问题和解决方法 原因&#xff1a;U盘名称未识别&#xff0c; 解决&#xff1a;进入启动界面&#xff0c;按e进入编辑界面 修改&#xff1a; vmlinuz initrdinitrd.img inst.stage2hd:LABELCentOS\x207\x20x86_64.check quiet 为 …

eslint-webpack-plugin

说明&#xff1a;现在eslint已经弃用了eslint-loader,如果要安装来使用的话&#xff0c;会报错&#xff0c;烦死人 大概的报错信息如下&#xff1a; ERROR in ./src/index.js Module build failed (from ./node_modules/eslint-loader/dist/cjs.js): TypeError: Cannot read …

驱动开发 day4 (led灯组分块驱动)

//编译驱动(注意Makefile的编译到移植到开发板的内核) make archarm //清除编译生成文件 make clean //安装驱动 insmod mycdev.ko //卸载驱动 rmmod mycdev //编译fun.c 函数(用到交叉工具编译) arm-linux-gnueabihf-gcc fun.c head.h #ifndef __HEAD_H__ #define __HEAD_H__…

Linux 之 systemctl

systemctl 可以控制软件&#xff08;一般指服务&#xff09;的启动、关闭、开机自启动 能被systemctl 管理的软件&#xff0c;一般也称 服务 系统内置服务均可被 systemctl 控制第三方软件&#xff0c;如果 自动注册了 可被systemctl 控制第三方软件&#xff0c;如果没有自动…

【业务功能篇60】Springboot + Spring Security 权限管理 【终篇】

4.4.7 权限校验扩展 4.4.7.1 PreAuthorize注解中的其他方法 hasAuthority&#xff1a;检查调用者是否具有指定的权限&#xff1b; RequestMapping("/hello")PreAuthorize("hasAuthority(system:user:list)")public String hello(){return "hello Sp…

【AutoGluon_03】保存模型并调用模型

在训练好autogluon模型之后&#xff0c;可以将模型进行保存。之后当有新的数据需要使用autogluon进行预测的时候&#xff0c;就可以直接加载原来训练好的模型进行训练。 import pandas as pd from sklearn.model_selection import train_test_split from autogluon.tabular im…

SpringSecurity的实现

SpringSecurity的实现 1.依赖 security起步依赖 redis起步依赖 fastjson jjwt生成token mybatis-plus起步依赖 mysql连接 web起步 test起步 <!-- security启动器 --><dependency><groupId>org.springframework.boot</groupId><arti…

【Unity细节】关于NotImplementedException: The method or operation is not implemented

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity细节和bug ⭐关于NotImplementedException: The method or operation is not implemented.⭐…

ReID网络:MGN网络(1) - 概述

Start MGN 1. 序言 现代基于感知的信息中&#xff0c;视觉信息占了80~85%。基于视觉信息的处理和分析被应用到诸如安防、电力、汽车等领域。 以安防市场为例&#xff0c;早在2017年&#xff0c;行业咨询公司IHS Market&#xff0c;我国在公共和私人领域安装有摄像头约1.76亿…