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函数使用父组件对当前行为的定义操作,可以使得具体实现不用在子组件中具体定义,完全交由父组件去定义即可,以此达到组件化开发解耦的目的

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

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

相关文章

用队列实现栈(C)

目录 题目&#xff1a; 解题&#xff1a; 代码讲解&#xff1a; 1.构建 2.creat 3.压栈 4.出栈 5.判空 6.释放 题目&#xff1a; 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、po…

【Linux学习】Linux 的虚拟化和容器化技术

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

如何设计一个类似Dubbo的RPC框架

首先有个注册中心,提供的服务在注册中心注册保留各个服务的信息,用zookeeper来做。然后消费者需要去注册中心拿对应的服务信息,而且每个服务可能会存在于多台机器上。接着就发起一次请求了,怎么发起?基于动态代理,面向接口获取到一个动态代理,就是接口在本地的一个代理,…

MySQL 导入库/建表时/出现乱码

问题描述&#xff1a; 新建不久的项目在使用Navicat for MySQL进行查看数据&#xff0c;发现表中注释的部分乱码&#xff0c;但是项目中获取的数据使用不会。 猜测因为是数据库编码和项目中使用的不一样&#xff0c;又因为项目的连接语句定义了需要编码&#xff0c;故项目运行…

浅述安防视频监控平台EasyCVR视频汇聚管理系统运维管理能力

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…

Go 性能压测工具之wrk介绍与使用

在项目正式上线之前&#xff0c;我们通常需要通过压测来评估当前系统能够支撑的请求量、排查可能存在的隐藏bug&#xff1b;压力测试&#xff08;压测&#xff09;是确保系统在高负载情况下仍能稳定运行的重要步骤。通过模拟高并发场景&#xff0c;可以评估系统的性能瓶颈、可靠…

在云端遇见雨云:一位服务器寻觅者的指南

引言&#xff1a;寻觅一座云端归宿 当我踏入数字世界的边缘&#xff0c;带着对网络的探索与期待&#xff0c;我迫切需要一座安全可靠的数字栖息地。云计算技术正如一场魔法般的变革&#xff0c;而在这片广袤的云端中&#xff0c;雨云就像是一位友善的向导&#xff0c;引领我穿越…

(C)1005 继续(3n+1)猜想

1005 继续(3n1)猜想&#xff1a; 问题描述 卡拉兹(Callatz)猜想已经在1001中给出了描述。在这个题目里&#xff0c;情况稍微有些复杂。 当我们验证卡拉兹猜想的时候&#xff0c;为了避免重复计算&#xff0c;可以记录下递推过程中遇到的每一个数。例如对 n3 进行验证的时候&a…

30.多个线程交替执行

线程一输出a,5次&#xff1b; 线程二输出b,5次&#xff1b; 线程三输出c,5次&#xff1b; 现在要求输出abcabcabcabcabc怎么实现&#xff1f; 采用wait和notifyAll实现 public class ThreadTest {public static void main(String[] args) {WaitNotify waitNotify new Wai…

3DGS实时高质量大规模场景渲染最新SOTA!

作者&#xff1a;小柠檬 | 来源&#xff1a;3DCV 在公众号「3DCV」后台&#xff0c;回复「原论文」可获取论文pdf 添加微信&#xff1a;dddvision&#xff0c;备注&#xff1a;3D高斯&#xff0c;拉你入群。文末附行业细分群 详细内容请关注3DCV 3D视觉精品课程&#xff1a;…

文字识别 Optical Character Recognition,OCR CTC STN

文字识别 Optical Character Recognition,OCR 自然场景文本检测识别技术综述 将图片上的文字内容,智能识别成为可编辑的文本。 场景文字识别(Scene Text Recognition,STR) OCR(Optical Character Recognition, 光学字符识别)传统上指对输入扫描文档图像进行分析处理,识…

【Java EE】Maven jar 包下载失败问题的解决方法

文章目录 1. 配置好国内的Maven源1.1配置当前项⽬setting1.2设置新项⽬的setting 2.重新下载jar包3.其他问题⭕总结 1. 配置好国内的Maven源 因为中央仓库在国外, 所以下载起来会⽐较慢, 所以咱们选择借助国内⼀些公开的远程仓库来下载资源 接下来介绍, 如何设置国内源 1.1配…

【JAVAEE学习】探究Java中多线程的使用和重点及考点

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

Java基数排序知识点(含面试大厂题和源码)

基数排序&#xff08;Radix Sort&#xff09;是一种非比较型整数排序算法&#xff0c;其原理是将整数按位数切割成不同的数字&#xff0c;然后按每个位数分别比较。它通过从最低位&#xff08;个位&#xff09;开始排序&#xff0c;然后逐渐转向最高位&#xff0c;对每一位进行…

Arcgis研究区图经纬度(南北)切换为英文字体(SN)

只在做英文论文研究区图的时候用&#xff0c;平常为了方便还是切换为中文

MySQL中 in 和 exists 区别

在MySQL中&#xff0c;IN和EXISTS都是用于在子查询中测试条件的操作符&#xff0c;但它们在处理和效率上有一些重要的区别。MySQL中的in语句是把外表和内表作hash连接&#xff0c;⽽exists语句是对外表作loop循环&#xff0c;每次loop循环再对内表进⾏查询。⼤家⼀直认为exists…

面试题:JVM 调优

一、JVM 参数设置 1. tomcat 的设置 vm 参数 修改 TOMCAT_HOME/bin/catalina.sh 文件&#xff0c;如下图 JAVA_OPTS"-Xms512m -Xmx1024m" 2. springboot 项目 jar 文件启动 通常在linux系统下直接加参数启动springboot项目 nohup java -Xms512m -Xmx1024m -jar…

作业3:计算机体系结构属性优选

作业3&#xff1a;计算机体系结构属性优选 一. 单选题&#xff08;共11题&#xff0c;55分&#xff09; (单选题)下列哪个选项属于非线性结构&#xff08; &#xff09;&#xff1f; A. 线性表 B. 栈 C. 树 D. 队列 正确答案: C:树; (单选题) 浮点数在机器中的表示形式如下所…

运行sentinel Java环境不是8以及端口被占用如何运行

1.Java环境不是8 运行sentinel (没有耐心直接看第三点) java --add-opens java.base/java.langALL-UNNAMED -jar sentinel-dashboard-1.8.1.jar2.8080端口被使用 运行 sentinel java -jar -Dserver.port8090 sentinel-dashboard-1.8.1.jar3.8080端口占用和Java环境不是8 运行…

JS详解-fetch核心语法

document.querySelector(.btn).addEventListener(click,async () > {const p new URLSearchParams({pname:浙江省,cname:杭州市})//1、如何请求&#xff1f;默认为get&#xff0c;参数1 url地址&#xff0c;返回promiseconst res await fetch(http://hmajax.itheima.net/…