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.mzph.cn/news/611320.shtml

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

相关文章

Redis异步写失败后补数逻辑设计

背景 最近各种机房事故频发&#xff0c;所以很多公司都对Redis存储等进行异步多活&#xff0c;我们公司采用的方式是通过客户端双写的方式来实现异地Redis机房的备份&#xff0c;但是当异地机房出现临时网络故障时&#xff0c;就涉及到了如何进行补数的操作&#xff0c;本文就…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机图像转换由Mono10转换为Mono8(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK实现相机图像转换由Mono10转换为Mono8&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的Mono10转换为Mono8图的技术背景在NEOAPI SDK里实现相机图像由Mono10转换为Mono8格式 工业相机通过NEOAPI SDK实现相机图像转换的优…

【大麦小米学量化】升级pywencai解决同花顺问财接口访问问题实现智能选股(小白避坑指南)

文章目录 前言一、pywencai 怎么了&#xff1f;二、解决办法三、智能选股代码&#xff08;缺环境的&#xff0c;请看开头文章推荐的博文&#xff09;总结 前言 前面撰文&#xff1a;【大麦小米学量化】通过pywencai访问同花顺问财接口实现智能选股 很多小伙伴应该已经用得很六…

理解Herbrand Equivalence

笔者最近在看GVN的一系列论文&#xff0c;总会看到一个概念叫Herbran Equivalence&#xff0c;依靠这种定义&#xff0c;能够判断一个GVN算法是否是complete的&#xff0c;也即检测一个算法是否是precise的&#xff0c;只有找到所有Herbrand Equivalence关系的算法才能称得上是…

Ddos攻击防御之使用nginx

Ddos 攻击是最常见的web攻击了,原理非常简单,用自己的电脑模拟大量用户发送大量请求,apache 的 ab 压力测试工具就可以做到这一点,如果我这样做,而对方的服务器配置没有我电脑好,那么一会之后,对方的服务器就难以响应其他用户的请求,如果我控制了大量肉鸡并使用这些肉鸡…

2024.1.10

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

01-你好Python-python环境安装 python解释器的安装 pycharm的安装

python环境安装 官方网址&#xff1a;https://python.org 这里可以下载最新版本的&#xff0c;下载完成以后在自己的浏览器文件下载的文件夹中找到该文件 下载速度可能会比较慢&#xff0c;这里已经提供好了文件&#xff0c;可以直接点击安装 点击Customize installation 点击…

2. Spring Boot 自动配置 Mybatis 流程

1. Spring Boot 自动配置 Mybatis 自动配置过程中做了3个主要bean的创建及很重要的一些事情。 sqlSessionFactory、sqlSessionTemplate、MapperScannerConfigurer 等配置bean的创建。sqlSessionFactory&#xff1a;解析 xml配置文件&#xff0c;并将MappedStatement放入到Has…

Mybatis之基本操作

目录 一、Mybatis中的增删改操作1、单个insert2、单个delete3、批量select4、单个update 二、数据输入1、单个简单的类型2、实体类类型参数3、零散的简单类型数据4、Map参数的数据类型①使用场景②对应关系 三、数据输出1、返回单个简单类型数据2、返回实体类对象3、返回Map类型…

pulsar的架构与特性记录

一、什么是云原生 云原生的概念是2013年Matt Stine提出的,到目前为止&#xff0c;云原生的概念发生了多次变更&#xff0c;目前最新对云原生定义为: Devps持续交付微服务容器 而符合云原生架构的应用程序是: 采用开源堆栈(K8SDocker)进行容器化&#xff0c;基于微服务架构提高灵…

人工智能利用深度学习技术增强高级驾驶辅助系统(ADAS)

深度学习通过实时传感器数据增强高级驾驶辅助系统(ADAS)&#xff0c;实现精确的物体检测、碰撞预测和主动决策。 人工智能和机器学习利用深度学习技术的优势&#xff0c;使高级驾驶辅助系统(ADAS)发生了重大变革。ADAS在很大程度上依赖深度学习来分析和解释从各种传感器获得的…

Flutter 中使用 ICON

Flutter Icon URL &#xff1a; https://fonts.google.com/icons&#xff1a; 在Flutter中使用 Icon 步骤如下&#xff1a; 导入图标库 在Dart 文件中导入 material.dart 包&#xff0c;该包包含了 Flutter 的图标库。 import package:flutter/material.dart;使用图标组件 …

解决Vue.js not detected的问题

"Vue.js not detected"通常是由于Vue Devtools无法检测到你的Vue.js应用程序而引起的。这个问题可能有几种原因&#xff0c;下面是一些建议的解决方法&#xff1a; 1. **安装Vue Devtools浏览器插件:** - 确保你已经安装了Vue Devtools浏览器插件。你可以在Chrom…

救赎之道,就在其中

时光荏苒&#xff0c;不知不觉距离我踏入职场的第一天已经快一年了。最近也是看到平台举办年度征文活动&#xff0c;借此契机重新审视自己这两年来的成长历程&#xff0c;也希望对正在迷茫的人提供一些精神上的慰藉。 1.对未来的迷茫 如果要给两年前的自己打上标签&#xff0…

独立站营销:那些适合海外推广的视频平台!

对于独立站来说&#xff0c;利用视频平台进行营销是扩大影响力和吸引观众的重要策略。在海外推广视频网站时&#xff0c;选择适合的平台很关键。那么除了我们熟知的YouTube、TikTok等视频平台&#xff0c;还有哪些不错的海外视频网站呢&#xff1f; 一、Rumble 众所周知&…

在IntelliJ IDEA上使用通义灵码(TONGYI Lingma)

参考链接&#xff1a; 通义灵码产品介绍_智能编码助手_AI编程_云效(Apsara Devops)-阿里云帮助中心 【IDEA如何使用通义灵码&#xff1f;】_idea 通义灵码-CSDN博客 1. 简介 1.1 定义 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提…

实现多级缓存(Redis+Caffeine)

文章目录 多级缓存的概述多级缓存的优势 多级缓存的概述 在高性能的服务架构设计中&#xff0c;缓存是一个不可或缺的环节。在实际的项目中&#xff0c;我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中&#xff0c;只有当缓存的访问没有命中时再查询数据库。在…

【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星

在上一篇博客&#xff08;【UE Niagara学习笔记】05 - 喷射火焰顶部的蓝色火焰&#xff09;的基础上继续实现喷射火焰的火星的效果。 目录 效果 步骤 一、创建材质实例 二、添加新的发射器 2.1 设置粒子材质 2.2 设置发射器持续生成粒子 2.3 设置粒子生成数量 2.4 设…

前端项目构建打包生成Git信息文件

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录前言一、前端项目构建打包生成Git信息文件作用二、步骤1.引入相关的npm包1.1. **fs** 包1.2. **child_process** 包1.3. **os** 包 (非必须 如果你想生成的文件信息中包含当前电脑信息则可用)1.4. **path** 包…

MySql -数据库基本概念

一、数据库的基本概念 1.为什么要学数据库&#xff1f; 之前我们如果想将一些数据实现永久化存储&#xff0c;可以怎么做呢&#xff1f;没错。使用IO流的技术将数据保存到本地文件中但是接下来我有这样一个需求&#xff1a;将下面的user.txt文件中的王五年龄修改为35 张三 2…