vue.js踩坑之组件参数检验与非props特性

vue组件参数检验与非props特性

---

学前疑问：

1. 什么是组件参数检验？
2. 组件参数校验都有哪些属性设置？分别表示什么意思？
3. 什么是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
		}
	}
}

通过学习上述代码，理解记忆几个重点：

1. 类型type的校验
2. 必传项required的使用设置
3. 默认值default的使用设置
4. 比较复杂的自定义校验器validator的使用设置
5. 所谓props特性：简单说就是定义的content=“hello world”，经过H5页面解析之后，不会且不存在于html标签内作为属性！反之就是非props特性，就会以属性的方式，存在于html标签内，这一点可以通过浏览器控制台查看代码的解析效果去理解。

---

以上就是关于 “ 组件参数检验与非props特性 ” 的全部内容。