【Vue3】组件递归

【Vue3】组件递归

  • 实现效果

通过传入一个数字,实现数字次循环
在这里插入图片描述

  • 父组件
<script setup>
import { ref } from "vue";
import RecursionMe from "./components/RecursionMe/index.vue";const level = ref(0);const add = () => level.value++;
</script><template><div><RecursionMe :level="level" @add="add" /></div>
</template>
  • 子组件
<script>
export default {name: "RecursionMe", //给组件命名
};
</script><script setup>
import { defineEmits } from "vue";
const props = defineProps({level: Number,
});const emit = defineEmits(["add"]);const add = () => emit("add");
</script><template><div><div v-if="level === 0" class="over"><button @click="add">添加一层</button></div><div v-else class="box"><recursion-me :level="level - 1" @add="add" /></div></div>
</template><style scoped>
.over {width: 200px;height: 160px;background-color: aquamarine;
}
.box {display: inline-block;padding-right: 10px;padding-bottom: 10px;border-right: 1px solid red;border-bottom: 1px solid red;
}
</style>

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

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

相关文章

接口自动化测试 —— JMeter断言基本使用

断言 断言&#xff1a;就是让程序判断预期结果和实际结果是否一致 注意&#xff1a;请求发起成功了&#xff0c;不代表着一定符合预期的结果。 JMeter中常用断言 响应断言 JSON断言 持续时间断言 响应断言 步骤&#xff1a;&#xff1a;线程组——HTTP取样器——断言——…

解决springboot项目中的groupId、package或路径的混淆问题

对于像我一样喜欢跳跃着学习的聪明人来说&#xff0c;肯定要学springboot&#xff0c;什么sevlet、maven、java基础&#xff0c;都太老土了&#xff0c;用不到就不学。所以古代的聪明人有句话叫“书到用时方恨少”&#xff0c;测试开源项目时&#xff0c;编译总是报错&#xff…

Linux-Centos7安装Docker

文章目录 一、前言二、Docker安装1、Docker及系统版本2、Docker的自动化安装3、Docker手动安装3.1、卸载Docker&#xff08;可选&#xff09;3.2、设置源仓库3.3、Docker安装3.4、Docker启动3.5、验证是否安装成功3.5.1、拉取镜像3.5.2、查看镜像3.5.3、运行镜像 3.6、删除Dock…

http和https的区别?

什么是 HTTP&#xff1f; HTTP是一种互联网数据传输协议&#xff0c;用于在网络服务器和客户端之间进行数据传输。作为万维网的基础&#xff0c;HTTP协议允许网络浏览器向网络服务器发送请求&#xff0c;服务器则会返回响应。HTTP协议基于文本&#xff0c;因此传输的数据是人类…

多源最短路径算法:Floyd-Warshall算法分析

文章目录 图的邻接矩阵 一.Floyd-Warshall算法思想(基于动态规划)二.Floyd-Warshall算法接口笔记附录:单源最短路径--Bellman-Ford算法1.Bellman-Ford算法接口核心部分2.Bellman-Ford算法接口 图的邻接矩阵 namespace Graph_Structure {//Vertex是代表顶点的数据类型,Weight是…

Approaching (Almost) Any Machine Learning Problem中译版

前言 Abhishek Thakur&#xff0c;很多kaggler对他都非常熟悉&#xff0c;2017年&#xff0c;他在 Linkedin 发表了一篇名为Approaching (Almost) Any Machine Learning Problem的文章&#xff0c;介绍他建立的一个自动的机器学习框架&#xff0c;几乎可以解决任何机器学习问题…

JY901B智能9轴加速度计陀螺仪角度传感器

今日学习使用JY901B智能9轴加速度计陀螺仪角度传感器 本文会先使用上位机获取数据作演示&#xff0c;后介绍它的数据表发送原理。 文章提供详细的原理讲解&#xff0c;测试工程下载&#xff0c;代码讲解&#xff0c;本人有多注释的习惯&#xff0c;希望对大家有帮助。 我的J…

【LeetCode】剑指 Offer <二刷>(4)

目录 题目&#xff1a;剑指 Offer 09. 用两个栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 10- I. 斐波那契数列 - 力扣&am…

FFmpeg5.0源码阅读——FFmpeg大体框架

摘要&#xff1a;前一段时间熟悉了下FFmpeg主流程源码实现&#xff0c;对FFmpeg的整体框架有了个大概的认识&#xff0c;因此在此做一个笔记&#xff0c;希望以比较容易理解的文字描述FFmpeg本身的结构&#xff0c;加深对FFmpeg的框架进行梳理加深理解&#xff0c;如果文章中有…

Linux 常见命令操作

一、目录管理 1.1 列出目录 ls # ls 命令 # -a 参数&#xff0c;查看全部的文件&#xff0c;包括隐藏的文件 # -l 参数&#xff0c;列出所有的文件&#xff0c;包括文件的属性和权限&#xff0c;不显示隐藏文件 [rootlocalhost /]# ls bin boot dev etc home lib lib64…

C# Dapper 操作Oracle数据库

nuget安装内容 1.配置连接字符串 OracleConnectionString这个可用 {"Logging": {"LogLevel": {"Default": "Information","Microsoft.AspNetCore": "Warning"}},"AllowedHosts": "*","…

前几天写的博客被选中进入【CSDN月度精选】榜单

小收获&#xff0c;记录一下&#xff0c;哈哈 这个貌似是CSDN给的排名和得分&#xff1a;

中东 Shopify 如何使用 Bytebase 构建一站式数据库开发工作流

公司简介 Salla 是一家 2016 年成立&#xff0c;位于沙特麦加的自建站电商平台。 作为中东 Shopify&#xff0c;其最大的特点是支持阿拉伯语建站&#xff0c;并且提供更多适应中东地区特点的本地化服务。截止目前&#xff0c;已有 47,000 家店铺入驻 Salla&#xff0c;商品销售…

云计算环境中高性能计算的挑战与对策

文章目录 云计算中的高性能计算挑战1. 资源竞争&#xff1a;2. 网络延迟&#xff1a;3. 数据传输效率&#xff1a;4. 虚拟化开销&#xff1a;5. 节点异构性&#xff1a; 高性能计算在云计算环境中的对策1. 定制化虚拟机镜像&#xff1a;2. 弹性资源调整&#xff1a;3. 高效数据…

springCloud整合Zookeeper的时候调用找不到服务

SpringCloud整合Zookeeper的时候调用找不到服务 首先&#xff0c;我们在注册中心注册了这个服务&#xff1a; 然后我们使用RestTemplate 调用的时候发现失败了&#xff1a;找不到这个服务&#xff1a; 找了很多资料发现这个必须要加上负载才行 BeanLoadBalanced //负载publi…

_数字矩阵

题目&#xff1a;一个3阶的数字矩阵如下&#xff1a; 1 2 3 8 9 4 7 6 5 现在给定数字n(1<n≤20)&#xff0c;输出n阶数字矩阵。 思路&#xff1a; 放出一条好玩的贪吃蛇&#xff0c;按照右下左上的顺序吃蛋糕&#xff0c;一边吃蛋糕&#xff0c;一边拉数字&#xff1b…

高级IO(select、poll、epoll)

在介绍本文之前&#xff0c;先提出一个问题 什么是IO&#xff1f; 等数据拷贝 1.等 - IO事件就绪&#xff08;检测功能成分&#xff09; 2.数据拷贝 高效的IO就是&#xff1a;单位时间&#xff0c;等的比重越小&#xff0c;IO的效率越高 五种IO模型 IO模型&#xff1a; 阻塞式…

微服务通信[HTTP|RPC同步通信、MQ异步通信]

概念 A服务调用B服务,B服务调C服务,C服务调D服务,即微服务之间的通信(也可以叫微服务之间的调用) HTTP同步通信 一种轻量级的通信协议,常用于在不同的微服务之间进行通信,也是最简单的通信方式使用REST ful为开发规范&#xff0c;将服务对外暴露的HTTP调用方式为REST API(如GET…

ChatGPT 实现动态地图可视化展示

地图可视化分析有许多优点和好处: 1.直观理解:地图可视化使得复杂的数据更易于理解。通过地图可视化,人们可以直观地看到地理位置、地区之间的关系以及空间分布的模式。 2.提高决策效率:地图可视化可以帮助决策者快速理解和解释数据,从而提高决策效率。 3.高效的数据整…

Redis 哨兵(sentinel)

1. 是什么一 1.1 吹哨人巡查监控后台master主机是否故障&#xff0c;如果故障了根据投票数自动将某一个从库转换为新主库&#xff0c;继续对外服务 1.2 作用 俗称&#xff0c;无人值守运维 哨兵的作用&#xff1a; 1、监控redis运行状态&#xff0c;包括master和slave 2、当m…