vue.js --prop、prop的验证和prop的注意事项
1、prop的验证(我就直接从官网复制了)
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 对HTML 中的 attribute名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
1、以数组的形式
prop:['name','age'];
2、以对象的形式
prop:{
name:{
type:String,
default:''
},
age:{
type:Number,
default:18,
}
}
JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持,所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE,请使用折行转义字符取而代之
折行转义字符?
Vue.component('my-component', {
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、prop验证失败的时候,(开发版本的vue)构建的项目会发出警告;
2、prop的验证会在vue实例创建之前就开始了,所以,在prop中不能书写以下属性:data、computed、methods在default 或 validator 函数中是不可用的
2、类型检查
那么type有哪些?8种
String
Object
Array
Number
Symbol
Boolean
Date
Function
type 还可以是一个自定义的构造函数,并且通过 instanceof 来进行检查确认
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
验证 author prop 的值是否是通过 new Person 创建的。
Vue.component('blog-post', {
props: {
author: Person
}
})
还没有评论,来说两句吧...