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

?props介绍：

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

?props类型：

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

StringNumberBooleanArrayObjectDateFunctionSymbol 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 } } }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。