学前疑问:
什么是组件参数检验?
组件参数校验都有哪些属性设置?分别表示什么意思?
什么是props特性?何为非props特性?如何判断?
重要代码讲解如下:
父组件通过属性content向子组件chhild进行参数hello world的传递,
而子组件可以对父组件传递过来的内容进行约束。
通过props可以进行约束设置:
比如:约束父组件传过来的content属性值为string类型?
props: {
content: String //约束为字符串类型
}
props: {
content: Number //约束为数字类型
}
props: {
content: [Number, String] //约束为数字或字符串类型
}
当然,也可以使用下面的写法,虽然浏览器控制台会报错,但也是可以的:
props: {
content: {
type: String, //约束为 字符串类型
required: false, //约束为 必传数据
default: 'default value',
validator: function(value) { //自定义校验,约束长度必须大于5,否则返回false
return (vaule.length > 5) //自定义校验规则;若校验通过return返回true,否则返回false
}
}
}
通过学习上述代码,理解记忆几个重点:
类型type的校验
必传项required的使用设置
默认值default的使用设置
比较复杂的自定义校验器validator的使用设置
所谓props特性:简单说就是定义的content=”hello world”,经过H5页面解析之后,不会且不存在于html标签内作为属性!反之就是非props特性,就会以属性的方式,存在于html标签内,这一点可以通过浏览器控制台查看代码的解析效果去理解。
以上就是关于 “ 组件参数检验与非props特性 ” 的全部内容。