Vue3----props和emit的使用

news2025/2/2 3:02:49

作用:父组件通过 props 向下传递数据给子组件;

用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的。

用法1(不指定类型的简单接受):

在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义一个props选项进行接收使用,要注意在子组件里面不需要在props以外的地方事先定义

在上面可以看见传进来的age是一个字符串类型,如果想要让传进来的值自动加1不能在子组件使用时里面+1,如下图所示会变成字符串加法241

 正确的解决方案是在父组件进行传参时就要进行使用v-bind进行动态绑定,又或者可以使用一个冒号:(简写形式),作用都是运行引号里面的表达式返回运行结果,如下图所示

用法2(接受同时进行类型限制):

        指定传进来的参数的类型,这里假如传进来类型和指定的类型不一样时会优先以传进来的类型为准,并给出警告。

 用法3(接受同时类型限制+默认值指定):

指定类型后还有两个选项,一个是指定是否必要,一个是没有传时的默认值

        

 注意:

        传进来props元素是不能更改的,否则会报错,如果需要修改应该用一个新的变量去接受它再修改,如下图所示,因为props的优先级是高于return的,所以this.age的内容会提前准备好 

另外,经过测试,这个方法只能在data里面用,无法在setup里面用

emit的使用

        setup里面有两个参数props和context

如下图所示,其中props就是和上面说的一样时父组件向子组件传递的信息,如右下图所示

 现在重点来到emit,emit是context中的一个东西

作用:用来触发父组件里面绑定的函数并可以传参回父组件

如图父组件APP.vue里面的配置,在子组件<StDent/>标签里面绑定了一个函数xxx,并传了一个参数xxx1给了子组件。 并且绑定的函数xxx1还有一个参数要输入。

 

 此时来到子组件这里,子组件里面用一个按钮绑定了一个事件用来触发父组件的事件xxx1并且传了一个字符串“++”回去,

 

 最终得到以下的效果,每点击一次子组件StDent里面的按钮,父组件里面的一个字符串属性就会自动添加两个+并显示出来 

emit总结:经过上述例子,我们只需要知道emit是可以让子组件去触发父组件的函数这一点就够了

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

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

相关文章

Nacos学习笔记 (2)Nacos基础核心特性

内容&#xff1a; Nacos架构及其核心特性&#xff0c;包括服务注册、服务发现、发布与获取配置特性&#xff0c;以及Nacos Spring关键特性。 本文内容&#xff0c;参考 Nacos 官网与 《Nacos架构&原理》一书。 1. Nacos 架构 详情推荐参考&#xff1a; &#xff08;1&a…

服务器取证——服务器基础知识

目录 一、服务器基本介绍 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;构成 &#xff08;三&#xff09; 种类 &#xff08;四&#xff09;与pc区别 二、 磁盘阵列RAID &#xff08;一&#xff09;概念 &#xff08;二&#xff09;产生原因 &#xff0…

【Django】第二课 银行账户管理系统开发

概念 本文在上一篇文章基础之前进行构建和完善 账户信息的分页显示 用户通过点击首页的“查询账户”&#xff0c;进入账户信息查询页面 则点击该按钮触发点击事件&#xff0c;向django服务器发出请求 接着我们在urls.py中需要定义与该地址进行匹配的地址&#xff0c;并匹配后…

Java on VS Code 12月更新年度亮点回顾|实时内存视图、注入处理器支持与用户体验改进

作者&#xff1a;Nick Zhu - Senior Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;一年的时间过得很快&#xff0c;我们已经来到了2022年的年底。回顾 2022 年&#xff0c;我们的产品也经历了很多的迭代&#xff0c;在此之中…

甲氧基聚乙二醇二苯并环辛烯mPEG-DBCO简介DBCO-mPEG科研实验用试剂

中文名&#xff1a;甲氧基聚乙二醇二苯并环辛烯 英文名&#xff1a;mPEG-DBCO&#xff1b;DBCO-mPEG 分子量: 1K.2K.5K.10k.20k.30k 溶解度: DMSO, DMF 储存条件: -20C 状态&#xff1a;淡黄色到白色固体&#xff0c;或者半固体&#xff0c;取决于分子量。 溶解性&#x…

网心科技马婷:探寻边缘计算的“诗和远方”

​​LiveVideoStackCon 2022上海站活动结束&#xff0c;每一次大会的举办对音视频领域都是新的洗礼&#xff0c;同时也带来了新的收获和挑战。随着音视频技术在各种行业、场景中的逐渐成熟&#xff0c;更多的业务形态、产品变换 、跨界案例等越来越多的部分值得我们探寻和研究。…

「网络工程师必会技能」-路由器介绍和路由器基本配置

「网络工程师必会技能」-路由器介绍和路由器基本配置&#xff0c;这是每个网络必须会的技能&#xff0c;不是你有证书就一个网络工程师了哦&#xff01; 以Cisco路由器为例说明&#xff1a; &#xff08;1&#xff09;访问路由器。访问路由器与访问交换机一样&#xff0c;可以…

医院陪护小程序,专业的事情交给专业的人

陪诊服务这几年一直受到人们的好评&#xff0c;有了医院陪护小程序之后一些无法居家照顾老人的子女可以通过小程序为老人预约服务&#xff0c;陪诊平台的出现还让陪诊员有了正规的接单平台&#xff0c;不仅方便了人们下单找陪诊员还可以对陪诊人员坐正规的管理。那么在开发医院…

33.前端笔记-CSS3-2D转换

目录1、转换2、二维坐标系2.1 2D转换之移动translate2.2 2D旋转之rotate练习1练习2练习32.3 2D转换之缩放scale练习1练习22D转换综合写法转换综合练习1、转换 转换transform是CSS3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果 2、二维坐标系 2.…

Fabric.js 修改画布交互方式到底有什么用?

本文简介 点赞 关注 收藏 学会了 fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive 。 官方文档对 canvas.interactive 的解释是&#xff1a; Indicates that canvas is interactive. This property should not be changed. canvas.in…

FPU与VFP最全面解释

本文希望能将FPU以及ARM中的FPU介绍清楚。 1. FPU&#xff08;Floating-Point Unit&#xff09; 浮点运算单元是处理器内部用于执行浮点数计算的逻辑部件&#xff0c;或者说硬件电路。不是所有的处理器都有该功能。浮点运算满足IEEE 754的标准&#xff0c;所谓IEEE 754标准&a…

关于Linux的动静态库

文章目录什么是动静态库生成静态库生成发布生成动态库发布使用库使用静态库查看系统头文件路径查看系统库文件路径使用库文件和头文件指定路径搜索头文件卸载库使用动态库动态库的运行搜索路径什么是动静态库 静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时…

再携手,齐并进!菊风助力宁波银行坐席PUSH外呼项目

随着“金融数字化”逐步成为金融行业的新浪潮&#xff0c;运用更加灵活的触达手段提升营销效果&#xff0c;促成业务闭环愈发成为银行业等金融机构角逐数字化转型成功的关键。 在此背景下&#xff0c;金融机构对于实时音视频技术的应用也从普遍的「呼入」需求逐步扩展到创新的…

LinkedHashSet源码解析

LinkedHashSet源码解析 问题 &#xff08;1&#xff09;LinkedHashSet 的底层使用什么存储元素&#xff1f; &#xff08;2&#xff09;LinkedHashSet 与 HashSet 有什么不同&#xff1f; &#xff08;3&#xff09;LinkedHashSet 是有序的吗&#xff1f; &#xff08;4&a…

Vue2与Vue3 setup的使用差异与对比

最近一直在做vue2的技术栈升级&#xff0c;于是心血来潮&#xff0c;就想要不写篇文章总结一下vue2和vue3在使用上的不同吧&#xff0c;于是乎&#xff0c;我们这就开始吧&#xff01; 首先说明一下&#xff0c;vue3有多种写法&#xff0c;本文使用setup语法糖&#xff0c;不考…

硬核!Github 星标 79.4K 的阿里强推 Java 面试参考指南到底有多强?

谈到 Java 面试&#xff0c;相信大家第一时间脑子里想到的词肯定是金三银四&#xff0c;金九银十。好像大家的潜意识里做 Java 开发的都得在这个时候才能出去面试&#xff0c;跳槽成功率才高&#xff01;但 LZ 不这么认为&#xff0c;LZ 觉得我们做技术的一生中会遇到很多大大小…

组件技术--设计--jsp+servlet+bean+MySQL 简单的登录注册案例

JavaBeanMySQLjspservlet 简单的登录注册案例登录注册案例需求核心系统组成Javaweb项目框架基本思想BeancounterUserDaoUserDaoservletLoginCljspindex.jspLoginServlet.jspregister.jspregisterMessage.jspwelcome.jsptargetpom.xmlWEB-INFweb.xml登录注册案例需求 本项目利用…

【论文阅读笔记】CycleISP: Real Image Restoration via Improved Data Synthesis

论文地址&#xff1a;https://arxiv.org/abs/2003.07761 代码地址&#xff1a;https://github.com/swz30/CycleISP 论文小结 总的来说&#xff0c;就是现实世界中无法获取有效的图像对。且之前合成噪声的方式是在sRGB上添加高斯白噪声&#xff0c;但对于相机传感器成像管道来说…

工控CTF之协议分析7——OMRON

协议分析 流量分析 主要以工控流量和恶意流量为主&#xff0c;难度较低的题目主要考察Wireshark使用和找规律&#xff0c;难度较高的题目主要考察协议定义和特征 简单只能简单得干篇一律&#xff0c;难可以难得五花八门 常见的工控协议有&#xff1a;Modbus、MMS、IEC60870、…

同源策略跨域

目录1.同源策略限制的意义1.请求协议 均为 http2.主机此这为 localhost3.端口号不同 一个 8080 一个 50002.注意3.解决跨域代理服务器 80801.同源策略限制的意义 让前端发送的请求不能随意访问其他端口的服务器&#xff0c;一定程度保护服务器和用户的隐私 1.请求协议 均为 …