vue Props

Props 声明​

一个组件需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute

在使用 <script setup> 的单文件组件中,props 可以使用 defineProps() 宏来声明:

<script setup>
const props = defineProps(['foo'])console.log(props.foo)
</script>

在没有使用 <script setup> 的组件中,prop 可以使用 props 选项来声明:

export default {props: ['foo'],setup(props) {// setup() 接收 props 作为第一个参数console.log(props.foo)}
}

注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的,两种声明方式背后其实使用的都是 prop 选项。

除了使用字符串数组来声明 prop 外,还可以使用对象的形式:

// 使用 <script setup>
defineProps({title: String,likes: Number
})
// 非 <script setup>
export default {props: {title: String,likes: Number}
}

对于以对象形式声明的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。比如,如果要求一个 prop 的值是 number 类型,则可使用 Number 构造函数作为其声明的值。

对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。我们将在本章节稍后进一步讨论有关 prop 校验的更多细节。

如果你正在搭配 TypeScript 使用 <script setup>,也可以使用类型标注来声明 props:

<script setup lang="ts">
defineProps<{title?: stringlikes?: number
}>()
</script>

传递 prop 的细节

Prop 名字格式

如果一个 prop 的名字很长,应使用 camelCase 形式,因为它们是合法的 JavaScript 标识符,可以直接在模板的表达式中使用,也可以避免在作为属性 key 名时必须加上引号。

defineProps({greetingMessage: String
})
<span>{{ greetingMessage }}</span>

 虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 内模板时例外),但实际上为了和 HTML attribute 对齐,我们通常会将其写为 kebab-case 形式:

<MyComponent greeting-message="hello" />

对于组件名我们推荐使用 PascalCase,因为这提高了模板的可读性,能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说,使用 camelCase 并没有太多优势,因此我们推荐更贴近 HTML 的书写风格。

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

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

相关文章

python:dict(字典、映射)使用解析

列表使用&#xff1a;[] 元组使用&#xff1a;() 字符串使用&#xff1a;"" 集合使用&#xff1a;{} 字典&#xff1a;{key:value} 生活中的字典&#xff1a;记录大量的字与含义&#xff1b; python中的字典&#xff1a;通过key去找到对应的value;[key]:value …

Vue 工程化开发入门

Vue开发的两种方式&#xff1a; 核心包传统开发模式&#xff1a;基于html/css/js文件&#xff0c;直接引入核心包&#xff0c;开发Vue工程化开发模式&#xff1a;基于构建工具的环境中开发Vue 这里选择Vue cli脚手架 进行开发&#xff0c;搜索教程自行下载。 组件化开发 一个页…

STM32入门学习之ADC

1.ADC在STM32进行数据采集时十分重要。通过ADC可以将外界的数字信号转换为模拟信号&#xff0c;以满足采样的需求。(资料参考于正点原子) STM32 拥有 1~3 个 ADC &#xff08; STM32F101/102 系列只有 1 个 ADC &#xff09;&#xff0c;这些 ADC 可以独立使用&#…

苍穹外卖,接入redis cache后,新增套餐有问题

终端报错&#xff1a; java.lang.IllegalArgumentException: Null key returned for cache operation (maybe you are using named params on classes without debug info?) Builder[public com.sky.result.Result com.sky.controller.admin.SetmealController.save(com.sky.d…

vue3 双向绑定:如何在自定义组件中修改props定义的属性值,并更新父组件绑定的响应式变量值

1、自定义支持双向绑定的prop 在子组件中声明一个 count prop&#xff0c;通过触发 update:count 事件更新父组件值 子组件示例代码&#xff1a; <template><div><div>[子组件] count: {{ count }}</div><button click"onClick">1&…

虚拟机网络实现桥接模式

虚拟机网络实现桥接模式 虚拟化软件&#xff1a;VMware 17 Linux&#xff1a;rocky8_9 主机&#xff1a;Win10 文章目录 虚拟机网络实现桥接模式1. 桥接模式介绍2. 查看Win本机的网络信息&#xff08;以笔记本电脑以WiFi联网为例&#x…

保姆级教程申请地理位置接口都给我去试

小程序地理位置接口有什么功能&#xff1f; 目前小程序的地理位置接口已经调整为审核制了&#xff0c;也就是说我们开发者如果小程序需要用到getlocation等接口的话&#xff0c;需要先在小程序后台进行开通申请&#xff0c;提交相关证明材料才可以获得接口使用权限。 小程序地理…

Fourier 测试时间自适应与多级一致性用于鲁棒分类

文章目录 Fourier Test-Time Adaptation with Multi-level Consistency for Robust Classification摘要方法实验结果 Fourier Test-Time Adaptation with Multi-level Consistency for Robust Classification 摘要 该研究提出了一种名为 Fourier 测试时间适应&#xff08;FTT…

汽车车灯的材料是什么?汽车车灯的灯罩如果破损破裂破洞了要怎么修复?

汽车车灯的材料主要包括灯罩和灯底座两部分&#xff0c;它们所使用的材料各不相同。 车灯罩的材料主要是透明且具有良好耐热性和耐紫外线性能的塑料。其中&#xff0c;聚碳酸酯&#xff08;PC&#xff09;是一种常用的材料&#xff0c;它具有高抗冲击性、耐化学品腐蚀和优良的…

大数据BI可视化(Echarts组件)项目开发-熟悉结合Vue开发图表组件7.0附带1/6商家销售统计(横向柱状图)

一.创建项目 创建 1.npm install -g vue/cli vue create vision 2. 3. 4.版本 5.是否使用历史路由 6.CSS预处理 7.ES标准配置 8.啥时候es标准提示-保存文件后 9.将配置文件放入单独文件中处理 10.需要保留新建项目以上设置 11.选择“Use PNPM”或者“Use NPM” 12.创建 13访…

五一假期零碎时间练习学习过的内容(商城版)

目录 1 总览1.1 技术架构1.2 其他1.2.1 数据库1.2.2 后端部分1.2.2.1 复习feign1.2.2.2 复习下网关网关的核心功能特性&#xff1a;网关路由的流程断言工厂过滤器工厂全局过滤器 过滤器执行顺序解决跨域问题 1.2.2.3 es部分复习 1.2.3 前端部分 2 day1 配置网关2.1 任务2.2 网关…

RT-Thread互斥量

文章目录 前言一、RT-Thread互斥量的概念二、互斥量和信号量的区别三、互斥量的函数使用1.创建互斥量2.删除互斥量3.获取互斥量4.释放互斥量 四、互斥量的基本使用五、FreeRTOS中互斥量和RT-Thread互斥量的区别总结 前言 本篇文章将为大家讲解RT-Thread中的互斥量概念和使用方…

【4088】基于小程序实现的二手物品交易系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

pandas学习笔记11

DataFrame结构 DataFrame 一个表格型的数据结构&#xff0c;既有行标签&#xff08;index&#xff09;&#xff0c;又有列标签&#xff08;columns&#xff09;&#xff0c;它也被称异构数据表&#xff0c;所谓异构&#xff0c;指的是表格中每列的数据类型可以不同&#xff0c;…

目标检测算法YOLOv5简介

没有关于YOLOv5的直接论文&#xff0c;YOLOv5由Ultralytics维护&#xff0c;源码见&#xff1a;https://github.com/ultralytics/yolov5 &#xff0c;于2020年6月发布v1.0版本&#xff0c;最新发布版本为v7.0&#xff0c;License为AGPL-3.0. 以下内容主要来自&#xff1a; 1. U…

2024.4.29 Pandas day01 基础语法

pandas是python的一个数据库&#xff0c;在使用数据库的时候需要输入 import pandas as pd 引入&#xff0c; df pd.read.csv(文件路径“&#xff09;&#xff1a;这是利用pandas数据库读取CSV文件的方法&#xff0c;如果读取EXCEL文件或者其他文件&#xff0c;csv文件换成其他…

库存管理系统开源啦

软件介绍 ModernWMS是一个针对小型物流仓储供应链流程的开源库存管理系统。该系统的开发初衷是为了满足中小型企业在有限IT预算下对仓储管理的需求。通过总结多年ERP系统研发经验&#xff0c;项目团队开发了这套适用于中小型企业的系统&#xff0c;以帮助那些有特定需求的用户。…

Python-Socket编程实现tcp-udp通信

本文章是记录我准备大创项目时学的socket编程的用法&#xff0c;纯属记录生活&#xff0c;没有教学意义&#xff0c;视频我是看b站up主王铭东学的&#xff0c;讲的很详细&#xff0c;我只粗略学了个大概&#xff0c;我想要通过tcp&#xff0c;udp传输yolo目标检测中的物体坐标信…

C语言中的goto语句

goto label; C 语言中的 goto 语句允许把控制无条件转移到同一函数内的被标记的语句。 #include <stdio.h> int main(){goto first;printf("我是你好\n");first:printf("nihao\n");second:printf("This is 2\n");return 0; } 使用goto会…

== 和 equals()区别,equals()重写问题

对于引用类型&#xff1a;比较的是两个引用是否相同&#xff08;所指的是否为同一个对象&#xff09;&#xff0c;注&#xff1a;如果两个引用所指的对象内容一样&#xff0c;但是不是同一个对象&#xff08;hashcode不一样&#xff09;&#xff0c;依然返回false&#xff0c;随…