react 插槽
问题开发当中会经常出现组件十分相似的组件,只有一部分是不同的
解决: 父组件:在引用的时候
import { Component } from "react";
import Me from "../me";const name = <div>名称</div>
class Shoop extends Component {render(){return <div style={{display: "flex"}}>{name}<Me><div slot="img"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.GwJCNqHxfwmnsMUpKG6tmAHaHa?w=208&h=207&c=7&r=0&o=5&pid=1.7"></img></div><div slot="voide">视频</div></Me><Me><div slot="voide">视频</div></Me><Me><div></div></Me></div>}
}
export default Shoop
子组件
const Me = (props)=> {const newChildren = {}if(props.children && props.children.length > 1) {console.log(props.children,"props.childrenprops.childrenprops.children")props.children.map((Item) => {newChildren[Item.props.slot] = {}newChildren[Item.props.slot]["children"] = Item.props.children})}return (<div style={{height:"100px",width:"200px",background:"red"}}><div>名称</div><div> 图片自定义区域 {newChildren?.img ? newChildren?.img?.children : ""} </div><div> {newChildren?.voide ? newChildren?.voide?.children : ""}</div></div>)
}
export default Me
父组件设置 solt 其实设置什么都可以,只是vue 通常以solt 为定义出于习惯
当父组件设置过数据以后,自组件可以通过props.childen 拿到想要的数据进行处理
这里我没有写单插槽定义
如果写多个插槽的时候要考虑单个的问题,因为单个插槽传递过来是对象形式的
相关文章:
react 插槽
问题开发当中会经常出现组件十分相似的组件,只有一部分是不同的 解决: 父组件:在引用的时候 import { Component } from "react"; import Me from "../me";const name <div>名称</div> class Shoop extends Compone…...
Linux运用fork函数创建进程
fork函数: 函数原型: pid_t fork(void); 父进程调用fork函数创建一个子进程,子进程的用户区父进程的用户区完全一样,但是内核区不完全一样;如父进程的PID和子进程的PID不一样。 返回值: RETURN VALUEO…...
Pytest测试技巧之Fixture:模块化管理测试数据
在 Pytest 测试中,有效管理测试数据是提高测试质量和可维护性的关键。本文将深入探讨 Pytest 中的 Fixture,特别是如何利用 Fixture 实现测试数据的模块化管理,以提高测试用例的清晰度和可复用性。 什么是Fixture? 在 Pytest 中&a…...
设计模式-职责链模式Chain of Responsibility
职责链模式 一、原理和实现二、实现方式1) 使用链表实现2) 使用数组实现3) 扩展 作用:复用和扩展,在实际的项目开发中比较常用。在框架开发中,我们也可以利用它们来提供框架的扩展点,能够让框架的使用者在不修改框架源码的情况下&…...
书生浦语大模型实战营-课程作业(3)
下载sentence_transformer的代码运行情况。sentence_transformer用于embedding(转向量) 本地构建持久化向量数据库。就是把txt和md文件抽取出纯文本,分割成定长(500)后转换成向量,保存到本地,称…...
考研英语单词25
Day 25 bench n.长凳 elastic n.橡皮圈,松紧带 a.灵活的 “e-last 延伸出去” disaster n.灾难,灾祸【disastrous a.灾难性的,极坏的】 deadly a.致命的,极端的,势不两立的 hike n.徒步旅行&…...
计算机网络——08应用层原理
应用层原理 创建一个新的网络 编程 在不同的端系统上运行通过网络基础设施提供的服务,应用进程批次通信如Web Web服务器软件与浏览器软件通信 网络核心中没有应用层软件 网络核心没有应用层功能网络应用只能在端系统上存在 快速网络应用开发和部署 网络应用…...
面试计算机网络框架八股文十问十答第五期
面试计算机网络框架八股文十问十答第五期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)与缓存相关的HTTP请…...
拟合案例1:matlab积分函数拟合详细步骤及源码
本文介绍一下基于matlab实现积分函数拟合的过程。采用的工具是lsqcurvefit和nlinfit两个函数工具。关于包含积分运算的函数,这里可以分为两大类啊。我们用具体的案例来展示:一种是积分运算中不包含这个自变量,如下图的第一个公式,也就是说它这个积分运算只有R和Q这两个待定…...
嵌入式软件设计入门:从零开始学习嵌入式软件设计
(本文为简单介绍,个人观点仅供参考) 首先,让我们了解一下嵌入式软件的定义。嵌入式软件是指运行在嵌入式系统中的特定用途软件,它通常被用来控制硬件设备、处理实时数据和实现特定功能。与桌面应用程序相比,嵌入式软件需要具备更高的实时性、…...
Educational Codeforces Round 135 (Rated for Div. 2)C. Digital Logarithm(思维)
文章目录 题目链接题意题解代码 题目链接 C. Digital Logarithm 题意 给两个长度位 n n n的数组 a a a、 b b b,一个操作 f f f 定义操作 f f f为, a [ i ] f ( a [ i ] ) a [ i ] a[i]f(a[i])a[i] a[i]f(a[i])a[i]的位数 求最少多少次操作可以使 …...
微信小程序介绍、账号申请、开发者工具目录结构详解及小程序配置
目录 一、微信小程序介绍 1.什么是小程序? 2.小程序可以干什么? 3.微信小程序特点 二、账号申请 1.账号注册 2.测试号申请 三、安装开发工具 四、开发小程序 五、目录结构 JSON 配置 小程序配置 app.json 工具配置 project.config.json 页…...
数字的魅力之情有独钟的素数
情有独钟的素数 什么是素数 素数(Prime number)也称为质数,是指在非0自然数中,除了1与其本身之外不拥有其他因数的自然数。也就是说,素数需要满足两个条件: 大于1的整数;只拥有1和其自身两个…...
Vue2源码梳理:render函数的实现
render 在 $mount 时,会调用 render 方法在写 template 时,最终也会转换成 render 方法Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node它的定义在 src/core/instance/render.js 文件中,它返回的是一个…...
flask+python企业产品订单管理系统938re
在设计中采用“自下而上”的思想,在创新型产品提前购模块实现了个人中心、个体管理、发布企业管理、投资企业管理、项目分类管理、产品项目管理、个体投资管理、企业投资管理、个体订单管理、企业订单管理、系统管理等的功能性进行操作。最终,对基本系统…...
Vue2源码梳理:关于数据驱动,与new Vue时的初始化操作
数据驱动 1 )概述 vue的一个核心思想,就是数据驱动 所谓数据驱动,就是指视图是由数据驱动生成的 对视图的修改并不会直接操作dom,而是通过修改数据 它相比我们传统的前端开发,如使用 jQuery 的前端库直接去修改 dom…...
【C++航海王:追寻罗杰的编程之路】关于模板,你知道哪些?
目录 1 -> 泛型编程 2 -> 函数模板 2.1 -> 函数模板概念 2.2 -> 函数模板格式 2.3 -> 函数模板的原理 2.4 -> 函数模板的实例化 2.5 -> 函数参数的匹配原则 3 -> 类模板 3.1 -> 类模板的定义格式 3.2 -> 类模板的实例化 1 -> 泛型编…...
分布式springboot 3项目集成mybatis官方生成器开发记录
文章目录 说明实现思路实现步骤第一步:创建generator子模块第二步:引入相关maven插件和依赖第三步:编写生成器配置文件第四步:运行查看结果 说明 该文章为作者开发学习记录,方便以后复习和交流主要内容为:…...
算法学习——LeetCode力扣回溯篇4
算法学习——LeetCode力扣回溯篇4 332. 重新安排行程 332. 重新安排行程 - 力扣(LeetCode) 描述 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票…...
c++ STL系列——(六)multimap
C标准模板库(STL)是C编程中不可或缺的一部分,它提供了一系列的容器、算法和函数模板,以简化常见的数据结构和算法的实现。在STL中,multimap是一个非常有用的容器,它提供了一种键值对的存储方式,…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
