vue3中接收props的两种写法
在 Vue 3 中,接收 props 有两种主要的写法,分别是运行时声明和基于类型的声明。下面为你详细介绍这两种写法。
1. 运行时声明
运行时声明是 Vue 2 中就已经存在的方式,在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来定义 props,并且可以指定 props 的类型、默认值和验证规则。
示例代码
<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup>
// 使用运行时声明接收props
const props = defineProps({name: {type: String,required: true},age: {type: Number,default: 18}
});
</script>
代码解释
defineProps是一个宏,用于定义组件的props。name和age是定义的两个props。name是一个必需的字符串类型的prop。age是一个可选的数字类型的prop,默认值为18。
2. 基于类型的声明
基于类型的声明是 Vue 3 新增的特性,它利用 TypeScript 的类型系统来定义 props。这种方式更加简洁,并且可以提供更好的类型检查。
示例代码
<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup lang="ts">
// 使用基于类型的声明接收props
interface Props {name: string;age?: number;
}const props = defineProps<Props>();
</script>
代码解释
- 首先定义了一个
Props接口,用于描述props的类型。 name是一个必需的字符串类型的prop。age是一个可选的数字类型的prop。defineProps<Props>()使用泛型来指定props的类型。
两种写法的对比
- 运行时声明:适用于不使用 TypeScript 的项目,或者需要定义复杂的验证规则和默认值的场景。
- 基于类型的声明:适用于使用 TypeScript 的项目,它可以提供更好的类型检查和代码提示。
使用组件
无论使用哪种方式声明 props,使用组件时传递 props 的方式是相同的。
<template><MyComponent name="John" age="25" />
</template><script setup>
import MyComponent from './MyComponent.vue';
</script>
以上就是 Vue 3 中接收 props 的两种主要写法。
相关文章:
vue3中接收props的两种写法
在 Vue 3 中,接收 props 有两种主要的写法,分别是运行时声明和基于类型的声明。下面为你详细介绍这两种写法。 1. 运行时声明 运行时声明是 Vue 2 中就已经存在的方式,在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来…...
Django下防御Race Condition
目录 漏洞原因 环境搭建 复现 A.无锁无事务时的竞争攻击 B.无锁有事务时的竞争攻击 防御 A.悲观锁加事务防御 B.乐观锁加事务防御 总结 漏洞原因 Race Condition 发生在多个执行实体(如线程、进程)同时访问共享资源时,由于执行顺序…...
Vue 项目中,.env文件怎么用?
在 Vue 项目中,.env 文件用于存储环境变量,不同的环境(如开发环境、测试环境、生产环境)可以使用不同的 .env 文件来管理对应的配置信息。以下是关于 Vue 项目中 .env 文件的详细使用方法: 1. 项目创建 确保你已经使…...
LeetCode hot 100—爬楼梯
题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 示例 1: 输入:n 2 输出:2 解释:有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例…...
【js逆向】
地址:aHR0cHM6Ly93d3cud2VpYm90b3AuY24vMi4wLw f12进入 debugger,过debugger 查看预览数据 全局搜索 请求网址中的 api.weibotop.cn 在下方疑似找到了加密和解密的函数 断点调试 控制台输出 那个n就是 常见的 cryptoJs库 const cryptoJs require(cry…...
论文阅读-秦汉时期北方边疆组织的空间互动模式与直道的定位(中国)
论文英文题目:A spatial interaction model of Qin-Han Dynasty organisation on the northern frontier and the location of the Zhidao highway (China) 发表于:journal of archaeological science,影响因子:3.030 论文主要是…...
DirectX12(D3D12)基础教程四 入门指南
本章主要讲了些D3D12概念和理论,对第一、二章相关概念的补充和纠正,要的理解D3D12概念和理论基础,结合代码加深理解。 命令队列和命令列表 为了实现渲染工作的重用和多线程缩放, 在 D3D12 中,做了三个重要方面不同于 …...
C语言:确定进制
题目: 6942对于十进制来说是错误的,但是对于13进制来说是正确的。即, 6(13) 9(13) 42(13), 而 42(13)4131213054(10)。 任务是写一段程序,读入三个整数p、q和 r,然后确定一个进制 B(2<B<40) 使得 p q r。 如果…...
如何在 Windows 10 启用卓越性能模式及不同电源计划对比
在使用 powercfg -duplicatescheme 命令启用 “卓越性能模式”(即 Ultimate Performance 模式)之前,有几个前提条件需要注意: 前提条件: 系统版本要求:卓越性能模式 仅在 Windows 10 专业版 或更高版本&a…...
Unity Android出包
Unity Android出包 1.Android Studio版本 不能高于Unity的版本 2.so库 这个库需要自己拷贝到Android工程当中 3.JDK版本太老 编译可以正常,但无法运行 File->ProjectStructure->SDK Location->Gradle Setting->Gradle JDK->X:/Android Stuido/jre …...
Day04 模拟原生开发app过程 Androidstudio+逍遥模拟器
1、用Androidstudio打开已经写好了的music项目 2、逍遥模拟器打开apk后缀文件 3、在源文件搜索关键字 以后的测试中做资产收集...
2025人工智能AI新突破:PINN内嵌物理神经网络火了
最近在淘金的时候发现基于物理信息的神经网络(简称PINN)也是个研究热点,遂研读了几篇经典论文,深觉这也是个好发论文的方向,所以火速整理了一些个人认为很值得一读的PINN论文和同学们分享。 为了方面同学们更好地理解…...
通义万相 2.1 携手蓝耘云平台:开启影视广告创意新纪元
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...
【计算机网络】深入解析 HTTP 请求中的 header 类型:Cookie 的概念、特点和应用场景:登录和用户认证
网络原理— HTTP 请求“报头”(header) Cookie 是什么 HTTP报头中的Cookie,用大白话来说,就像你去餐厅吃饭时拿到的一张会员卡: 初次访问 (清除该网站的所有 Cookie 后重新访问该网站,效果相同): 当你第一次访问一个网…...
LeetCode 解题思路 11(Hot 100)
解题思路: 若相等: 直接返回 true。若当前元素大于目标值: 由于列递增,当前列下方所有元素均大于目标值,故排除该列(向左移动)。若当前元素小于目标值: 由于行递增,当前…...
警惕AI神话破灭:深度解析大模型缺陷与禁用场景指南
摘要 当前AI大模型虽展现强大能力,但其本质缺陷可能引发系统性风险。本文从认知鸿沟、数据困境、伦理雷区、技术瓶颈四大维度剖析大模型局限性,揭示医疗诊断、法律决策等8类禁用场景,提出可信AI建设框架与用户防护策略。通过理论分析与实操案…...
文件系统调用(上) ─── linux第17课
目录 linux 中man 2和man 3的区别 文件内容介绍 C语言文件接口 示例: 输出信息到显示器,你有哪些方法 总结: 系统文件I/O 文件类的系统调用接口介绍 示例 open 函数具体使用哪个,和具体应用场景相关, write read close lseek ,类比C文件相关接…...
go 标准库包学习笔记
本博文包含了go的math,net/http,fmt,io,csv,time.Time,strconv,strings,sync.Pool的学习,笔记多是其实战如何用,而非简单的函数式的讲解,可谓是收藏佳作,不时翻翻。 文章目录 1、math2、net/http3、fmt4、…...
Unity摄像机跟随物体
功能描述 实现摄像机跟随物体,并使物体始终保持在画面中心位置。 实现步骤 创建脚本:在Unity中创建一个新的C#脚本,命名为CameraFollow。 代码如下: using UnityEngine;public class CameraFollow : MonoBehaviour {public Tran…...
线程管理操作
1.创建两个线程,,分支线程1拷贝文件的前一部分,分支线程2拷贝文件的后一部分 #include <head.h>#define SRC_FILE "./1.txt" #define DST_FILE "./2.txt" #define BUFFER_SIZE 4096struct copy_args {long start;l…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...
