在前面的一些章节中已经简单地使用过props，知道它是用来接受来自父组件的数据的。这一章来深入了解一下 props 的更多使用方法。
介绍
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
用法
| 选项 |
说明 |
| type |
数据类型 |
| default |
默认值 |
| required |
是否必填 |
| validator |
自定义验证函数 |
数据类型可以为String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。如果prop不是给定的类型将会抛出警告。
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 注意，引入vue.js时需要使用开发环境版本，这样才能在看到报错提示效果 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="number" v-model="msg" />
<v-demo :age="msg"></v-demo>
</div>
<script type="text/javascript">
Vue.component('v-demo', {
props: {
age: {
type: [Number, String],
default: 18,
required: true,
validator: function (value) {
return value >= 1;
}
}
},
template: `<div>我今年 {{ age }} 岁。</div>`
})
var vm = new Vue({
el: '#app',
data() {
return {
msg: 1
}
}
})
</script>
</body>
</html>
|
注意：
validator只是验证，这个函数返回值是布尔值，用这个布尔值来判断是否通过，它的返回值是验证作用，而不是修改props，如果想要修改原始数据，那么可以采用其他的方式，比如computed等方式修改，后面会讲到。