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;本文就…

理解Herbrand Equivalence

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

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 点击…

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;使用图标组件 …

救赎之道,就在其中

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

在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…

视频智能剪辑方案,企业视频制作新时代

视频已经成为了人们获取信息、娱乐和学习的重要方式。然而&#xff0c;传统的视频制作过程繁琐且耗时&#xff0c;这对于许多企业来说无疑是一个巨大的挑战。为了解决这个问题&#xff0c;美摄科技凭借其在机器学习、深度学习等AI算法方面的深厚积累&#xff0c;自主研发了一套…

23111 IO进程线程 day8

使用信号灯集完成三个进程的同步&#xff0c;A进程输出字符A&#xff0c;B进程输出字符B&#xff0c;C进程输出字符C&#xff0c;要求输出结果为ABCABCABCABCABC... #include<myhead.h> #include "sem.h"int main(int argc, const char *argv[]) {pid_t pid…

Linux的网络服务DHCP

一.了解DHCP服务 1.1 DHCP定义 DHCP&#xff08;动态主机配置协议&#xff09;是一个局域网的网络协议。指的是由服务器控制一段IP地址范围&#xff0c;客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码。默认情况下&#xff0c;DHCP作为Windows Server的一个服…

【开发小程序多少钱?智创开发】

开发一个小程序费用主要看做什么和怎么做&#xff1f; 第一部分&#xff1a;做什么&#xff1f; 做什么是指功能部分&#xff0c;开发的功能不一样&#xff0c;耗时也就不一样&#xff0c;价格自然也就不一样了。就好比买房&#xff0c;套二的公寓和别墅价格自然差距很大。所…

软光栅透视校正插值写好了

我这文章写的六,自己不写什么过程,直接发张图片.我发一下我看的引用. 透视矫正插值 Perspective-Correct Interpolation 计算机图形学六&#xff1a;正确使用重心坐标插值(透视矫正插值(Perspective-Correct Interpolation))和图形渲染管线总结 一开始写错了,改了大概两天改…

代理IP连接不上/网速过慢?如何应对?

当您使用代理时&#xff0c;您可能会遇到不同的代理错误代码显示代理IP连不通、访问失败、网速过慢等种种问题。 在本文中中&#xff0c;我们将讨论您在使用代理IP时可能遇到的常见错误、发生这些错误的原因以及解决方法。 一、常见代理服务器错误 当您尝试访问网站时&#…

Golang Web框架性能对比

Golang Web框架性能对比 github star排名依次: Gin Beego Iris Echo Revel Buffalo 性能上gin、iris、echo网上是给的数据都是五星&#xff0c;beego三星&#xff0c;revel两星 beego是国产&#xff0c;有中文文档,文档齐全 根据star数&#xff0c;性能&#xff0c;易用程度…