Vue3中props和emits的使用总结
Vue3中props和emits的使用介绍
- 1,看代码
- 1.1,App.vue
- 1.2,TodoItem.vue
- 2,总结
- 2.1 props
- 2.2 emits
1,看代码
1.1,App.vue
<script setup>
import { ref,reactive } from 'vue'
import TodoItem from './TodoItem.vue'const todos = ref([{id: 1,title: 'Do the dishes'},{id: 2,title: 'Take out the trash'},{id: 3,title: 'Mow the lawn'}
])
const item = reactive({id: 100,title: '你删不掉的,哈哈哈'
})
</script><template><ul><todo-itemv-for="(todo, index) in todos":key="todo.id":title="todo.title"@remove="todos.splice(index, 0,item)"></todo-item></ul>
</template>
1.2,TodoItem.vue
<script setup>
// 父传子用Props
defineProps(['title'])
// 子调父定义的操作用Emits
defineEmits(['remove'])
</script><template><li>{{ title }}<button @click="$emit('remove')">Remove</button></li>
</template>
2,总结
2.1 props
在Vue3中,使用defineProps函数接受父组件传过来的props对象,
2.2 emits
在Vue3中,通过defineEmits函数使用父组件对当前行为的定义操作,可以使得具体实现不用在子组件中具体定义,完全交由父组件去定义即可,以此达到组件化开发解耦的目的
相关文章:
Vue3中props和emits的使用总结
Vue3中props和emits的使用介绍 1,看代码1.1,App.vue1.2,TodoItem.vue 2,总结2.1 props2.2 emits 1,看代码 1.1,App.vue <script setup> import { ref,reactive } from vue import TodoItem from ./…...
HUAWEI 华为交换机 配置 Eth-Trunk 接口流量本地优先转发示例(堆叠)
组网需求 说明 S5720I-10X-PWH-SI-AC 和 S5720I-6X-PWH-SI-AC 不支持此配置。 如 图 3-23 所示,为了增加设备的容量采用设备堆叠技术,将 Switch3 和 Switch4通过专用的堆叠电缆链接起来,对外呈现为一台逻辑交换机。为了实现设备间的备份、…...
MySQL 优化及故障排查
目录 一、mysql 前置知识点 二、MySQL 单实例常见故障 故障一 故障二 故障三 故障四 故障五 故障六 故障七 故障八 三、MySQL 主从故障排查 故障一 故障二 故障三 四、MySQL 优化 1.硬件方面 (1)关于 CPU (2)关…...
H12-821_182
182.当0SPF运行在广播型网络中时,需要选举DR和BDR。那么以下哪一种状态会进行DR和BDR的选举? A.2-way B.Full C.Exchange D.Init 答案:A 注释: 每台路由器发送的hello报文都有DR字段和BDR字段。 路由器接口刚开始运行OSPF时,在等…...
IF语句
目录 if...then 数字大小的比较 if...then...else 比较两个数字的大小 if...then...elsif 根据输入的数字大小,判断学生成绩范围(优:90~100;良:80~89;中:70~79;及格࿱…...
AttributeError: module ‘wandb‘ has no attribute ‘init‘解决办法
安装对应的库 pip install wandb -i https://pypi.tuna.tsinghua.edu.cn/simple拓展——wandb是什么模块,有什么作用 wandb是一个用于跟踪、可视化和协作机器学习项目的工具。它提供了许多功能,包括实时的指标跟踪、超参数调整、模型的可视化等&#x…...
javaScript中微任务宏任务详解
在 JavaScript 中,任务分为两种类型:微任务(Microtask)和宏任务(Macrotask)。它们的执行顺序以及在事件循环(Event Loop)中的位置不同。 微任务(Microtask)&…...
牛客小白月赛90
title: 牛客小白月赛90 date: 2024-04-05 21:37:01 tags: 赛后思考与总结 categories: 比赛 A 思路 按题意直接累加就行 代码 int n; cin >> n;int m; cin >> m;ll ans 0;vector<int> a(n 1);for(int i 1; i < n ; i ) cin >> a[i];for(int i …...
【51单片机入门记录】A/D、D/A转换器PCF859应用
目录 一、IIC初始化代码 二、开发板电路图 三、PCF8591读/写字节操作流程及相关函数 (1)PCF8591(AD)读操作流程及代码 (2)PCF8591(AD)写操作流程及代码 四、应用示例-显示电压…...
设计模式(13):模板方法模式
场景: 实现一个功能时,整体步骤很固定,但是,某些部分易变。易变部分可以抽象出来,供子类实现。 开发中常见的场景 非常繁琐,各个框架,类库中都有它的影子,比如常见的有࿱…...
公众号申请上限怎么提升
一般可以申请多少个公众号?众所周知,在2013年前后,公众号申请是不限制数量的,后来企业开始限制申请50个,直到2018年的11月tx又发布,其中个人主体可申请公众号由2个调整为1个,企业主体由50个调整…...
【算法刷题day16】Leetcode:104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数
104.二叉树的最大深度 (优先掌握递归) 文档链接:[代码随想录] 题目链接:104.二叉树的最大深度 (优先掌握递归) 状态:ok 题目: 给定一个二叉树 root ,返回其最大深度。 二…...
电商技术揭秘一:电商架构设计与核心技术
文章目录 引言一、电商平台架构概述1.1 架构设计原则与架构类型选择1.2 传统电商平台架构与现代化架构趋势分析 二、高并发处理与负载均衡2.1 高并发访问特点分析与挑战2.2 负载均衡原理与算法选择 三、分布式数据库与缓存技术3.1 分布式数据库设计与一致性考量3.2 缓存策略与缓…...
Ubuntu 自启动应用程序的方法
1、自启动的方法 自启动应用程序可以在/etc/rc.local文件中调用脚本来启动应用程序,另外也可以自行编写一个服务来启动应用程序。这两种方法其实都是一种方法即使用服务来启动一个应用程序。rc.local脚本本身也是被一个rc.local的服务来调用的。如下图,可…...
Star GAN论文解析
论文地址:https://arxiv.org/pdf/1912.01865v1.pdf https://openaccess.thecvf.com/content_cvpr_2018/papers/Choi_StarGAN_Unified_Generative_CVPR_2018_paper.pdf 源码:stargan项目实战及源码解读-CSDN博客 1. 概述 在传统方法中&#x…...
全网最强JavaWeb笔记 | 万字长文爆肝JavaWeb开发——day06_数据库-MySQL-02
万字长文爆肝黑马程序员2023最新版JavaWeb教程。这套教程打破常规,不再局限于过时的老套JavaWeb技术,而是与时俱进,运用的都是企业中流行的前沿技术。笔者认真跟着这个教程,再一次认真学习一遍JavaWeb教程,温故而知新&…...
数据结构day2--双向链表
双向链表: 即可以从头遍历到尾部和从尾部遍历到头部的链表,每个结点包括两个链域:前驱指针域和后继指针域,所以比起单向链表,其可以在任意一个结点访问前后两个结点 关于双向链表的一个完整步骤为: 创建一个表头结构…...
蓝桥杯单片机真题实践篇
这里就不完全写思路过程代码什么的,这一篇文章就写我在训练真题中遇到的过程。 (呜呜呜,时间不够辣,能做多少算多少吧....) 十三届省赛题 问题1:数码管的数字消影不明显 (参考:蓝…...
前端pdf.js将pdf转为图片,尤其适合电子发票打印
写这个的原因就是打电子发票不方便,这个代码是纯js不需要后端服务直接将两张电子发票的pdf转为两张图片渲染到一张A4纸上面(完全不浪费,发票也不会变大),自动完成打印分页,点击打印即可。亲测可用所有电子发…...
第四百四十三回
文章目录 1. 概念介绍2. 思路与方法2.1 整体思路2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义Action菜单"相关的内容,本章回中将介绍如何获取屏幕相关参数.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
