Vue3中setup函数、以及父子组件传值讲解

news2024/9/19 10:44:49

文章目录

    • 1.vue3中setup函数的执行时机
    • 2.setup函数的两种写法
      • 2.1 普通写法
      • 2.2 语法糖写法
    • 3.vue3父组件给子组件传值。
    • 4.vue3子组件给父组件传值

1.vue3中setup函数的执行时机

setup选项的写法和执行时机,setup函数在beforeCreate函数之前执行,并且是自动执行
在这里插入图片描述
在这里插入图片描述

2.setup函数的两种写法

2.1 普通写法

setup形式定义的变量和方法,后面必须都得return出去!否则渲染不上。而且return出去的变量和方法,用一个对象包住。
在这里插入图片描述

2.2 语法糖写法

在script标签内部,写上setup,这样的话就不用将变量和方法名return出去了。
在这里插入图片描述
小结
在这里插入图片描述

3.vue3父组件给子组件传值。

父组件中传变量要加“:”例如下面的例子中count变量传给SonCom组件
子组件中通过defineProps函数来接父组件传来的变量,并且这个函数不需要引入就可以直接使用
在这里插入图片描述

4.vue3子组件给父组件传值

子组件通过emit给父组件传值
在父组件中绑定自定义函数@get-message,在子组件中通过defineEmits编译器宏生成emit方法,defineEmits函数里面接收一个数组,数组内部,接收子组件得到名字,然后调用emit方法就可以向父组件中传递变量了,emit函数第一个参数为函数名,第二个参数为变量。
在这里插入图片描述

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

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

相关文章

以安全为底线 共迎机遇和挑战|2023 开放原子全球开源峰会可信基础设施技术分论坛即将启幕

蚂蚁集团的业务领域,对于「可信」有非常高的技术要求。这种可信技术不仅体现在可靠、健壮,也体现在金融领域独有的风控难题以及分布式系统中持续提供服务的续航能力。可信基础设施中有大量的开源项目,而新的机会也在不断涌现。 2023 开放原子…

echarts 图表导出PDF(带滚动条)/图片导出PDF

echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明 效果展示 提出问题 在开发过程中,有需求是将展示出来的echarts图表导出为pdf 原本我的滚动条是使用echarts图表进行的滚动,但通过了解后得知,echarts图表如…

《人月神话》阅读推荐

用了两周的时间,大致过了一遍。书中讲述的很多方面可能此时并没有很深刻的体会,但是该书的预见性和分析还是很让人钦佩的。书中对项目、产品、程序、程序员等一系列对象的分析是相当精准的。虽然距今已有四十多年,但很多依旧在发生。   书中…

Java设计模式(四)

系列文章目录 UML类图 文章目录 系列文章目录前言一、UML类图二、UML基本介绍三、UML图1.类图—依赖关系(Dependence)2.类图—泛化关系(generalization)3.类图—实现关系(Implementation)4.类图—关联关系(Association)5.类图—聚合关系(Aggregation)6.类图—组合关系(Composi…

分布式(二)-大型网站架构演化发展历程

大型网站架构演化发展历程 大型网站的技术挑战主要来自于庞大的用户,高并发的访问和海量的数据,任何简单的业务一旦需要处理数以 P 计的数据和面对数以亿计的用户,问题就会变得很棘手。大型网站架构主要解决这类问题。 初始阶段的网站架构 …

MinIO 分片上传

文章目录 1.MinIO 简介2.为什么要分片上传?3.实现思路4.具体实现初始化客户端获取分片上传的预签名 URL合并分片中止合并 5.FAQ端口错误协议错误 参考文献 1.MinIO 简介 MinIO 是适用于 AI 的高性能对象存储系统。 MinIO 简单易用。简单性是 EB 级数据基础设施的基…

宝塔配置MySQL队列调度 | ModStart

执行以下操作前提前进入网站根目录,如 cd /www/wwwroot/xxx.com执行 artisan 命令前请参照 开发教程 → 开发使用常见问题 → 如何运行 /www/server/php/xxx/bin/php artisan xxx 命令 ① 生成数据库队列表迁移文件 在执行该步骤前,请先检查迁移文件 da…

【CSS 05】文本颜色 文本对齐 文字装饰 文本转换 文字间距 文本阴影 字体 字体样式 字体大小 谷歌字体

CSS 说在前面文本 text文本对齐 text-align文字装饰 text-decoration文本转换 text-transform文字间距 text_spacing文本阴影 text-shadow字体 font字体样式 font-style字体大小 font-size谷歌字体简写属性 shorthand 说在前面 事实证明,Zoro只要出现在标题就会被识…

go-GUI开发:fyne解决中文乱码+注册windows服务

go-GUI框架:fyne教程及解决中文乱码等常见bug 1 fyne教程 fyne教程地址: https://www.topgoer.cn/docs/goday/goday-1crdp17nj4v6phttps://pkg.go.dev/fyne.io/fyne/v2#section-readme 1.1 介绍 简单易用,fyne提供了简单直观的API&#xff…

iOS编译提效插件cocoapods-jxedt方案详解

1. 前言 本篇文章是cocoapods-jxedt插件实现方案的详解,主要从以下几个方面阐述了一下插件的实现方案和历程。 插件文件目录介绍插件的工作流程介绍插件实现过程中的问题和解决方案记录 如果你对插件的使用还不了解,建议先读一下cocoapods-jxedt使用介…

CVE漏洞复现-CVE-2023-32233 NetFilter权限提升

CVE-2023-32233 NetFilter权限提升 Netfilter是Linux 内核中的网络数据包处理框架(iptables)通过各种规则和过滤器,基于数据包的来源、目标地址、协议类型、端口号等信息,控制网络流量和数据包的转发和处理具体,详情请…

使用贝叶斯网络预测糖尿病:从理论到实践

2023年9月数学建模国赛期间提供ABCDE题思路加Matlab代码,专栏链接(赛前一个月恢复源码199,欢迎大家订阅):http://t.csdn.cn/Um9Zd 引言 在现实世界中,许多变量之间存在着复杂的概率关系,例如天气、交通、健康等方面的因素都会相互影响。为了更好地理解…

音频基本概念

1.音频信号 音频信号是一种连续变化的模拟信号,但计算机只能处理和记录二进制的数字信号,由自然音源得到的音频信号必须经过一定的变换,成为数字音频信号之后,才能送到计算机中作进一步的处理。 数字音频系统通过将声波的波型转换…

调用腾讯云API实现英文识别

目录 1. 作者介绍2. 腾讯云英文识别API介绍2.1 英文识别原理—OCR技术2.2 腾讯云英文识别API 3. 实验过程3.1获得API3.2申请调用接口3.3调试接口3.4实验代码3.5实验结果3.6 问题分析 4. 参考连接 1. 作者介绍 乔奕婕,女,西安工程大学电子信息学院&#…

nginx系列第六篇:结合nginx梳理linux中信号的使用

nginx中master进程来管理整个nginx工作的全过程,运行时其通过接收外部信号输入的方式来对内部进行相关调整。本文对照nginx来梳理一下linux中信号常用API的使用。 目录 1.函数sigaction和signal 2.关于信号集sigset_t 2.1 测试程序1 2.2 测试程序1 3.信号屏蔽…

宝塔安装ModStart常见问题

Q:环境提示PHP未禁用危险函数 安装系统时通常会需要解禁 system,exec,passthru,shell_exec,popen,proc_open 等危险函数。部分集成环境会提示危险函数风险,通常可以如下方式解决: 该函数在通常只是在系统 系统安装/系统升级/模块安装/模块升…

【SpinalHDL快速入门】4.3、基本类型之UInt/SInt

文章目录 1.1、描述1.2、声明1.3、运算符1.3.1、逻辑运算(Logic)1.3.2、算术运算(Arithmetic)1.3.3、比较(Comparison)1.3.4、类型转换(Type Cast)1.3.5、部分赋值/提取操作符&#…

第一章:数据库概述

第一章:数据库概述 1.1:为什么要使用数据库 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用。大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以"固化"&a…

低代码平台简单分享

低代码平台简单分享 文章目录 低代码平台简单分享1、什么是低代码?什么是低代码平台?2、低代码平台的前世今生**一、低代码的起源**二、低代码的分类三、低代码的能力四、低代码开发的特点 3、目前主流的低代码平台有哪些?优缺点?…

常用模拟低通滤波器的设计——契比雪夫II型滤波器

常用模拟低通滤波器的设计——契比雪夫II型滤波器 切比雪夫 II 型滤波器的振幅平方函数为: 式中,为有效带通截止频率, 是与通带波纹有关的参量, 大,波纹大,; 为 N 阶契比雪夫多项式。 在 Matl…