组件间通信案例练习

1.实现父传子
App.vue
<template><div class="app"><tab-control :titles='["衣服","鞋子","裤子"]'></tab-control><tab-control :titles='["流行","最新","优选","数码"]'></tab-control></div>
</template><script>import TabControl from "./TabControl"export default {components:{TabControl}
}
</script><style scoped></style>
TabControl.vue
<template><div class="tab-control"><template v-for="item in titles" :key="item"><div class="tab-control-item">{{item}}</div></template></div>
</template><script>import TabControl from "./TabControl"export default {
props:{titles:{type:Array,default:()=>[]}
}
}
</script><style scoped>
.tab-control{display: flex;height: 44px;line-height: 44px;text-align: center;}.tab-control-item{flex: 1;}
</style>

易错:
:titles='["衣服","鞋子","裤子"]'这里是"[]",不是[]
2.实现点击下方出现颜色条
如何实现点击获取当前index
注意v-for也要写上index,@click写上参数index
<template v-for="(item,index) in titles" :key="item"><div class="tab-control-item" @click="tabItemClick(index)" :class="{active:index==currentIndex}">{{item}}</div></template>
export default {
props:{titles:{type:Array,default:()=>[]}
},
data()
{return{currentIndex:0}
},
emits:["tabItemClick"],
methods:{tabItemClick(index){this.currentIndex=indexthis.$emit("tabItemClick",index)}
}
}
此处.active无空格
.tab-control-item.active
为了确保父组件知道发送了这个函数,emit要写入此函数
emits:["tabItemClick"],
methods:{tabItemClick(index){this.currentIndex=indexthis.$emit("tabItemClick",index)}
}
接着父元素@此函数,
<tab-control :titles='["衣服","鞋子","裤子"]'@tab-item-click="tabItemClick"></tab-control>
methods:{tabItemClick(index){console.log("app",index)}}
全部代码
App.vue
<template><div class="app"><!-- tab --><tab-control :titles='["衣服","鞋子","裤子"]'@tab-item-click="tabItemClick"></tab-control><!-- 展示内容 --><h1 >{{pageContents[currentIndex]}}</h1></div>
</template><script>import TabControl from "./TabControl"export default {data(){return{pageContents:["衣服列表","鞋子列表","裤子列表"],currentIndex:0}},components:{TabControl},methods:{tabItemClick(index){console.log("app",index)this.currentIndex=index}}
}
</script><style scoped></style>
TabControl.vue
<template><div class="tab-control"><template v-for="(item,index) in titles" :key="item"><div class="tab-control-item" @click="tabItemClick(index)" :class="{active:index==currentIndex}"><span>{{item}}</span></div></template></div>
</template><script>import TabControl from "./TabControl"export default {
props:{titles:{type:Array,default:()=>[]}
},
data()
{return{currentIndex:0}
},
emits:["tabItemClick"],
methods:{tabItemClick(index){this.currentIndex=indexthis.$emit("tabItemClick",index)}
}
}
</script><style scoped>
.tab-control{display: flex;height: 44px;line-height: 44px;text-align: center;}.tab-control-item{flex: 1;}.tab-control-item.active{color:red;font-weight: 700;}.tab-control-item.active span{border-bottom: 3px solid red;}
</style>

相关文章:
组件间通信案例练习
1.实现父传子 App.vue <template><div class"app"><tab-control :titles["衣服","鞋子","裤子"]></tab-control><tab-control :titles["流行","最新","优选","数码&q…...
【matlab】机器人工具箱快速上手-正运动学仿真(代码直接复制可用)
安装好机器人工具箱,代码复制可用,按需修改参数 1.建模 %%%%%%%%SCARA机器人仿真模型 l[0.457 0.325]; L(1) Link(d,0,a,l(1),alpha,0,standard,qlim,[-130 130]*pi/180);%连杆1 L(2)Link(d,0,a,l(2),alpha,pi,standard,qlim,[-145 145]*pi/180);%连杆…...
论文解读|PF-Net:用于 3D 点云补全的点分形网络
原创 | 文 BFT机器人 01 背景 从激光雷达等设备中获取的点云往往有所缺失(反光、遮挡等),这给点云的后续处理带来了一定的困难,也凸显出点云补全作为点云预处理方法的重要性。 点云补全(Point Cloud Completion&#x…...
网络安全(零基础)自学
一、网络安全基础知识 1.计算机基础知识 了解了计算机的硬件、软件、操作系统和网络结构等基础知识,可以帮助您更好地理解网络安全的概念和技术。 2.网络基础知识 了解了网络的结构、协议、服务和安全问题,可以帮助您更好地解决网络安全的原理和技术…...
Spring Security 身份验证的基本类/架构
目录 1、SecurityContextHolder 核心类 2、SecurityContext 接口 3、Authentication 用户认证信息接口 4、GrantedAuthority 拥有权限接口 5、AuthenticationManager 身份认证管理器接口 6、ProviderManager 身份认证管理器的实现 7、AuthenticationProvider 特定类型的…...
市值超300亿美金,SaaS独角兽Veeva如何讲好中国故事?
“全球前50的药企,有47家正在使用Veeva。” 提到Veeva Systems(以下简称“Veeva”),可能很多人并不熟悉。但是生命科学业内人士都知道,Veeva是全球头部的行业SaaS服务商。以“为生命科学行业构建行业云”为使命&#x…...
编译内联导致内存泄漏的问题定位修复
作者:0x264 问题 线上长时间存在一个跟异步 inflate 相关的量级较大的内存泄漏,如下所示: 第一次分析 从内存泄漏粗略看有几个信息: 被泄漏的Activity有很多,所以可能跟某个具体业务的关系不大引用链特别短…...
基于WebSocket实现的后台服务
基于WebSocket实现的后台服务,用于接收客户端的心跳消息,并根据心跳消息来维护客户端连接。 具体实现中,服务启动后会创建一个HttpListener对象,用于监听客户端的WebSocket连接请求。当客户端连接成功后,服务会为每个…...
Go语言中的结构体详解
关于 Golang 结构体 Golang 中没有“类”的概念,Golang 中的结构体和其他语言中的类有点相似。和其他面向对 象语言中的类相比,Golang 中的结构体具有更高的扩展性和灵活性。 Golang 中的基础数据类型可以表示一些事物的基本属性,但是当我们…...
pytest自动化测试指定执行测试用例
1、在控制台执行 打开cmd,进入项目目录 指定执行某个模块 pytest testcases\Logistics\Platform\CarSource\test_CarSourceList.py 指定执行某个目录及其子目录的所有测试文件 pytest testcases\Logistics\Platform\CarSource 指定执行某个模块的某个类的某个测试用例 pyte…...
英伟达 H100 vs. 苹果M2,大模型训练,哪款性价比更高?
M1芯片 | Uitra | AMD | A100 M2芯片 | ARM | A800 | H100 关键词:M2芯片;Ultra;M1芯片;UltraFusion;ULTRAMAN;RTX4090、A800;A100;H100;LLAMA、LM、AIGC、CHATGLM、LLVM、LLM、LLM…...
var、let和const的区别
先简单了解一下 var声明的变量会挂载在window上,而let和const声明的变量不会: var a 100; console.log(a,window.a); // 100 100let b 10; console.log(b,window.b); // 10 undefinedconst c 1; console.log(c,window.c); // 1 undefined v…...
(css)AI智能问答页面布局
(css)AI智能问答页面布局 效果: html <!-- AI框 --><div class"chat-top"><div class"chat-main" ref"chatList"><div v-if"!chatList.length" class"no-message"><span>欢迎使…...
【Pytorch学习】pytorch中的isinstance() 函数
描述 isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type()。 isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关系。 isinstance() 会认为子类是一种父类类型,考虑继承关系。 如果要判…...
(树) 剑指 Offer 07. 重建二叉树 ——【Leetcode每日一题】
❓剑指 Offer 07. 重建二叉树 难度:中等 输入某二叉树的 前序遍历 和 中序遍历 的结果,请构建该二叉树并返回其根节点。 假设输入的前序遍历和中序遍历的结果中都不含重复的数字。 示例 1: Input: preorder [3,9,20,15,7], inorder [9,3,15,20,7] …...
Gitlab 合并分支与请求合并
合并分支 方式一:图形界面 使用 GitGUI,右键菜单“GitExt Browse” - 菜单“命令” - 合并分支 方式二:命令行 在项目根目录下打开控制台,注意是本地 dev 与远程 master 的合并 // 1.查看本地分支,确认当前分支是否…...
【Matter】基于Ubuntu 22.04 编译chip-tool工具
前言 编译过程有点曲折,做下记录,过程中,有参考别人写的博客,也看github 官方介绍,终于跑通了~ 环境说明: 首先需要稳定的梯子,可以访问“外网”ubuntu 环境,最终成功实验在Ubunt…...
将 MongoDB 的 List<Document> 转换为对象列表
当我们使用 MongoDB 存储数据时,经常会涉及到将 MongoDB 的文档对象转换为对象列表的需求。在 Java 中,我们可以使用 MongoDB 的 Java 驱动程序和自定义类来实现这一转换过程。 本篇博客将介绍如何将 MongoDB 中的 List<Document> 转换为对象列表。…...
【Linux下6818开发板(ARM)】SecureCRT串口和交叉编译工具(巨细版!)
(꒪ꇴ꒪ ),hello我是祐言博客主页:C语言基础,Linux基础,软件配置领域博主🌍快上🚘,一起学习!送给读者的一句鸡汤🤔:集中起来的意志可以击穿顽石!作者水平很有限,如果发现错误&#x…...
应届生如何快速找Java开发工程师,先学会这17个基础问题
一、Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environment 的简称,java 运行环境,为 java 的…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...
Java后端检查空条件查询
通过抛出运行异常:throw new RuntimeException("请输入查询条件!");BranchWarehouseServiceImpl.java // 查询试剂交易(入库/出库)记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
深度解析:etcd 在 Milvus 向量数据库中的关键作用
目录 🚀 深度解析:etcd 在 Milvus 向量数据库中的关键作用 💡 什么是 etcd? 🧠 Milvus 架构简介 📦 etcd 在 Milvus 中的核心作用 🔧 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...
