3分钟了解 vue props type类型

编程基础 • 2025-01-06 18:27 • 阅读 8

用了很久的vue，有时候总觉得props type类型，总是有点模棱两可，今天来好好的盘盘他

props介绍：

都知道props是用来父给子传值的（单向的）,HTML 中的 attribute 名是大小写不敏感的，这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

props类型：

props type使用的目的，有点像typescript那种类型检查，type的类型有如下几种，

String
Number
Boolean
Array
Object
Date
Function
Symbol

props的写法：

第一种简单的写法（无默认值）：

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise }

第二种有默认值的写法：

注意:type 是对象类型的，default 要使用工厂函数获取，例子如下

props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }

今天的文章 3分钟了解 vue props type类型分享到此就结束了，感谢您的阅读。

3分钟了解 vue props type类型

props介绍：

props类型：

props的写法：

相关推荐