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…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...
Unity VR/MR开发-VR开发与传统3D开发的差异
视频讲解链接:【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库,用于数据验证和设置管理,通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发(如 FastAPI)、配置管理和数据解析,核心功能包括: 数据验证:通过…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
StarRocks 全面向量化执行引擎深度解析
StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计,相比传统行式处理引擎(如MySQL),性能可提升 5-10倍。以下是分层拆解: 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...
