本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 组件的参数校验
组件的参数校验：父组件向子组件传递的内容，子组件对所接收的数据做一些约束（规则的改变），这些约束叫做参数的校验。
1.1 父组件向子组件传值
父组件向子组件传递参数，通过“属性”的形式。子组件接收这些数据，用 props ，然后在子组件的 template 中传递该数据，以下代码已经演示了很多遍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-组件参数校验与非 props 特性</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component("child", {
props: ["content"],
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
1.2 子组件如何进行“值”的约束
改变一下子组件中的 props 传参的规则，即将原本值的数组形式改为对象形式。对象的“键”为所接收的数据名，键值为数据类型（如 String 、Number 、Object）——约束：子组件接收到的数据属性，必须为 xxx 数据类型。
<body>
<div id="root">
<child content="hello world"></child> <!-- ❗️注意：若需要传递“数字”，
那么写法是 :content="123" 。 -->
</div>
<script>
Vue.component("child", {
props: {
content: String // 🚀约束 content 为字符串。
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
<body>
<div id="root">
<child content="hello world"></child> <!-- ❗️注意：若需要传递“数字”，
那么写法是 :content="123" 。 -->
</div>
<script>
Vue.component("child", {
props: {
content: Number // 🚀约束 content 类型为数字。
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
<body>
<div id="root">
<child :content="123"></child> <!-- ❗️注意：若需要传递“数字”，
那么写法是 :content="123" 。 -->
</div>
<script>
Vue.component("child", {
props: {
content: Number // 🚀约束 content 类型为数字。
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
1.3 多种数据类型的参数校验
假设子组件要同时接收父组件传过来的多种数据类型，则可以在 props 中做如下表示：
Vue.component("child", {
props: {
content: [ Number, String ] // 🚀将“键值”用“数组”表示！
},
template: "<div>{{content}}</div>"
})
1.4 复杂的参数校验
当子组件 props 接收一个名为 content 的属性时，可以添加一些配置参数：
type表示所传数据的类型；required: true表示该属性是必传的；default: "default"提醒父组件没有进行相关的“属性”传递；validator自定义“校验器”，表示对传入属性的进行更复杂的校验。
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component("child", {
props: {
content: {
type: String, // 🚀表示类型必须为 String ；
required: false, // 🚀true 表示属性必传；false 表示可以不传属性；
default: "default" // 🚀提醒父组件并没有属性传递；
validator: function(value) { // 🚀自定义校验器，表示还可以对传入属性进行“长度”的校验；
return (value.length > 5) // 这个逻辑为 true ，“属性”才会被接收！
}
}
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
2 非 props 特性 🆚 props 特性
2.1 非 props 特性
若子组件未定义 props 来接收父组件通过“属性”传来的值，那么这个属性（如 content ）则为非 props 特性。
- 该属性会展现在子组件
template的 dom 标签属性中。
<body>
<div id="root">
<child content="hello world"></child> // ❗️content 会展现在 DOM 标签中！
</div>
<script>
Vue.component("child", {
template: "<div>hello</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
</body>
2.2 props 特性
父组件通过“属性”(如 content )向子组件传值时，子组件通过 props 来接收这个数据。这个属性则为 props 特性。
💡“ props 特性”的特点：
- 该属性不会出现在 dom 上；
- 父组件通过属性传值后，子组件就会通过
template中的插值表达式或通过this.content去取得该属性中的内容。
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component("child", {
props: {
content: {
type: String,
}
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
祝好，qdywxs ♥ you！
原文链接：https://juejin.cn/post/7219189558901293116 作者：itsOli
