setup 语法糖

只有vue3.2以上版本可以使用

优点:
更少的样板内容,更简洁的代码
能够使用纯 Typescript 声明props 和抛出事件
更好的运行时性能
更好的IDE类型推断性能

在sciprt标识上加上setup
顶层绑定都可以使用
不需要return ,可以直接使用
使用组件时不需要在definCompent的components引用
不用在使用setup函数

在组件Myprofile里,使用setup
defineProps() 和 defineEmits()
声明 props 和 emits 选项时获得完整的类型推导支持,
我们可以使用 defineProps 和 defineEmits API,
它们将自动地在 <script setup> 中可用 
props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式

APP.vue中引入组件,并去使用setup方式

对类型的 defineProps 声明的不足之处在于,它没有可以给 props 提供默认值的方式。
为了解决这个问题,我们还提供了 withDefaults 

在Myprofile文件里修改,在App.vue中,调 用时,去掉:user,获取的就是组件默认值

效果:

参考资料

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

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

相关文章

jmeter循环控制器

1.循环控制器 简单粗暴 写几次 循环几次 经常结合自定义变量使用 2.foreach控制器 搭配 变量一起使用的循环 一般变量的值是一个集合或者 是2个及2个以上的内容

C++与Typescript的区别

目录 一、C类模板和函数模板 1.类模板 2.函数模板 二&#xff0c;Typescript 的泛型声明 1.泛型函数 2.泛型类 为什么C和Typescript语言中主张模板和泛型 一、C类模板和函数模板 在C中&#xff0c;类模板和函数模板允许你为多种数据类型编写通用的代码。这就像每个人都有…

numpy100练习题,包含相应使用函数解释

取自github开源项目&#xff1a;numpy100题 文章目录 1. 导入numpy库并简写为 np (★☆☆)2. 打印numpy的版本和配置说明 (★☆☆)3. 创建一个长度为10的空向量 (★☆☆)4. 如何找到任何一个数组的内存大小&#xff1f; (★☆☆)5. 如何从命令行得到numpy中add函数的说明文档?…

Java虚拟机类加载机制探究:生命周期、初始化、使用与验证

一、java虚拟机与程序的生命周期 在如下几种情况之下&#xff0c;java虚拟机将结束生命周期&#xff1a; 执行了System.exit()方法程序正常执行结束程序在执行过程中遇到了异常或者错误而异常终止由于操作系统用出现错误而导致java虚拟机进程终止 二、类的加载&#xff0c;链…

javacc知识点

javacc的语法描述性文件以.jj结尾&#xff0c;一般情况下采用 1、option{JavaCC的选项} options部分&#xff0c;用于放置 JavaCC 的选项&#xff0c;常见option包括&#xff1a; STATIC&#xff1a;用于决定JavaCC生成的所有成员及方法是否被定义为static(注意&#xff1a;定义…

【算法Hot100系列】搜索旋转排序数组

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

Pytorch张量通过索引获取指定数据

import torch x torch.tensor([1,2,3])x Out[3]: tensor([1, 2, 3])x[0] # 索引操作&#xff1a;取单个数字 Out[4]: tensor(1)x[0:1] # 切片操作&#xff1a;可以保持维度不变 Out[5]: tensor([1])x[torch.tensor([True,False,True])] # 布尔值索引&#xff0c;通过条件筛…

Xcode15 升级问题记录

这里写自定义目录标题 新版本Xcode15升级问题1&#xff1a;rsync error: some files could not be transferred (code 23) at ...参考 新版本Xcode15升级 下载地址&#xff1a;https://developer.apple.com/download/all/ 我目前使用的版本是Xcode15.2 我新创建了一个项目&…

uni微信小程序强制用户更新版本

强制更新的代码参考官方文档 uni.getUpdateManager() | uni-app官网 我这边的如下&#xff1a; //检查版本更新const updateManager uni.getUpdateManager();updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log(res.hasUpdate, "是…

【JavaFX】JavaFX11开发踩坑记录

文章目录 技术栈踩坑记录 技术栈 JavaFX 11MavenJDK 11 踩坑记录 这些坑对于初学者很容易踩&#xff0c;JavaFX经常会报错空指针异常遇到其中一个问题可能就会消耗好几天的时间。 JavaFX 采用的是MVC架构设计&#xff0c;页面设计使用 fxml文件&#xff1b;业务逻辑采用Con…

部分城市公交站点数据,Shp+excel格式数据,2020年,几何类型为点

随着城市的发展和人口的增长&#xff0c;公共交通成为了人们出行的重要方式之一。而公交站点作为公共交通的重要组成部分&#xff0c;其数据信息的获取和分析对于城市规划和管理具有重要意义。 今天来分享一下部分城市公交站点数据&#xff1a; 首先先了解下该数据的基本信息 …

SOLIDWORKS2024新功能——SOLIDWORKS篇(一)

SOLIDWORKS2024新功能——SOLIDWORKS篇章节概括&#xff1a; • 切口工具 • 槽口延伸 • 戳记工具 • 薄片和槽口中的切割法线 切口工具 您可以使用切口工具在空心或薄壁圆柱体和圆锥体中生成切口。通过选择圆柱面或圆锥面上的边线&#xff0c;您可以将零件平展为钣金。 在…