use props
In Vue, the parent component transmits data to the child component through props. A simple example of using props:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: ['fooMessage'],
18 template: '<div> {{ fooMessage }} </div>'
19 };
20
21 var vm = new Vue({
22 components: {
23 'foo-component': fooComponent
24 },
25 el: '#app',
26 data: {
27 fooMessage: 123
28 }
29 });
30
31 </script>
32 </body>
33 </html>
Why have props validation
However, the above method is based on the fact that everyone follows the convention. Imagine that when someone wants to use the foo-component component, he may not have very clear requirements for the parameters to be accepted, so pass The input parameters may be unexpected to the person developing the subcomponent, and the program will fail. Just like we check the function before the function call, the props can also perform a pre-check.
Usually when calling a function, there is a bunch of parameter checks at the beginning of the function. This way of writing is very bad, so there is a validator mode later (don't go to Baidu, I randomly chose the name), school The validator mode refers to extracting the part of the parameter validation at the beginning of the function to manage it as a public part, and letting something be responsible for the validation. When the type is incorrect, it will throw an exception and not call it at all. This function, many frameworks are designed like this (Spring MVC, Struts2, etc.), props also provides this function, think about if there is no such function, in order to ensure correctness, we may need to use the props property before each time Write a bunch of code to check. The biggest advantage of the validator is that in most cases, we only need to declare what kind of data I need, let the validator check it and then stuff it to me.
type
You can use type to declare the type of data that this parameter can accept. When there is only one check rule, type can be abbreviated:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: Number
19 },
20 template: '<div> {{ fooMessage }} </div>'
21 };
22
23 var vm = new Vue({
24 components: {
25 'foo-component': fooComponent
26 },
27 el: '#app',
28 data: {
29 fooMessage: 123
30 }
31 });
32
33 </script>
34 </body>
35 </html>
Vue will issue a prompt when the incoming parameter type is incorrect:
type accepts multiple types
When the parameter can be one of more than one type, use an array to represent it.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: [Number, String]
19 },
20 template: '<div> {{ fooMessage }} </div>'
21 };
22
23 var vm = new Vue({
24 components: {
25 'foo-component': fooComponent
26 },
27 el: '#app',
28 data: {
29 fooMessage: 123
30 }
31 });
32
33 </script>
34 </body>
35 </html>
36
type can specify the type
type can be the following primitive types:
String
Number
Boolean
Function
Object
Array
Symbol
required
You can use the required option to declare whether this parameter must be passed in.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 type: Number,
20 required: true
21 }
22 },
23 template: '<div> {{ fooMessage }} </div>'
24 };
25
26 var vm = new Vue({
27 components: {
28 'foo-component': fooComponent
29 },
30 el: '#app',
31 data: {
32 fooMessage: 256
33 }
34 });
35
36 </script>
37 </body>
38 </html>
When no parameters are passed in:
default
Use the default option to specify the default value of the props variable when no parameters are passed in the parent component:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 type: Number,
20 default: 128
21 }
22 },
23 template: '<div> {{ fooMessage }} </div>'
24 };
25
26 var vm = new Vue({
27 components: {
28 'foo-component': fooComponent
29 },
30 el: '#app',
31 data: {
32 fooMessage: 256
33 }
34 });
35
36 </script>
37 </body>
38 </html>
When the parent component does not pass in the parameter, the value of the child component is 128, and when the parent component passes in the parameter, it is the specified parameter, for example, it can be 256 here.
When the type of type is Array or Object, default must be a function:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 type: Array,
20 default: function(){
21 return ['foo', 'bar'];
22 }
23 }
24 },
25 template: '<div> {{ fooMessage }} </div>'
26 };
27
28 var vm = new Vue({
29 components: {
30 'foo-component': fooComponent
31 },
32 el: '#app',
33 data: {
34 fooMessage: ['f', 'o', 'o']
35 }
36 });
37
38 </script>
39 </body>
40 </html>
required && default ???
So can required and default appear in a props variable at the same time?
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 type: Number,
20 required: true,
21 default: 128
22 }
23 },
24 template: '<div> {{ fooMessage }} </div>'
25 };
26
27 var vm = new Vue({
28 components: {
29 'foo-component': fooComponent
30 },
31 el: '#app',
32 data: {
33 fooMessage: 256
34 }
35 });
36
37 </script>
38 </body>
39 </html>
Rendering result:
Although Vue reported an error on the console, the props variable fooMessage still uses the default value set.
Things will not be so simple, and then test other situations, such as when the incoming parameter validation fails:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 type: Number
20 }
21 },
22 template: '<div> {{ fooMessage }} </div>'
23 };
24
25 var vm = new Vue({
26 components: {
27 'foo-component': fooComponent
28 },
29 el: '#app',
30 data: {
31 fooMessage: 'foobar'
32 }
33 });
34
35 </script>
36 </body>
37 </html>
Rendering result:
The type required by fooMessage is Number, and a String type is passed in. Although an error is reported in the console, it is still rendered.
From this, a conclusion can be drawn: Vue's props verification is only a reference, not mandatory.
validator
When the validation rules are complex and the default validation rules cannot be satisfied, a custom function can be used for validation.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue Study</title>
6 </head>
7 <body>
8
9 <div id="app">
10 <foo-component :foo-message="fooMessage"></foo-component>
11 </div>
12
13 <script type="text/javascript" src="lib/vue.js"></script>
14 <script type="text/javascript">
15
16 var fooComponent = {
17 props: {
18 fooMessage: {
19 validator: function(value){
20 return value>=0 && value<=128;
21 }
22 }
23 },
24 template: '<div> {{ fooMessage }} </div>'
25 };
26
27 var vm = new Vue({
28 components: {
29 'foo-component': fooComponent
30 },
31 el: '#app',
32 data: {
33 fooMessage: 100
34 }
35 });
36
37 </script>
38 </body>
39 </html>
a comprehensive example
1 props: {
2 // fooA only accepts numeric arguments
3 fooA: Number,
4 // fooB can accept parameters of type string and number
5 fooB: [String, Number],
6 // fooC can accept parameters of type string, and this parameter must be passed in
7 fooC: {
8 type: String,
9 required: true
10 },
11 // fooD accepts a parameter of numeric type, if not passed in, the default is 100
12 fooD: {
13 type: Number,
14 default: 100
15 },
16 // fooE accepts a parameter of type object
17 fooE: {
18 type: Object,
19 // Must use function return when setting default value for object type
20 default: function(){
21 return { message: 'Hello, world' }
22 }
23 },
24 // fooF uses a custom validator
25 fooF: {
26 validator: function(value){
27 return value>=0 && value<=100;
28 }
29 }
30 }