<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div> <foo-component></foo-component> </div> <script type="text/javascript" src="https://www.jb51.net/lib/vue.js"></script> <script type="text/javascript"> var fooComponent = { props: { fooMessage: { type: Number, default: 128 } }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 256 } }); </script> </body> </html>
当父组件未传入参数时子组件的值是128，当父组件传入参数时是其指定的参数，比如这里可以是256。
当type的类型为Array或者Object的时候default必须是一个函数：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div> <foo-component></foo-component> </div> <script type="text/javascript" src="https://www.jb51.net/lib/vue.js"></script> <script type="text/javascript"> var fooComponent = { props: { fooMessage: { type: Array, default: function(){ return ['foo', 'bar']; } } }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: ['f', 'o', 'o'] } }); </script> </body> </html>
required && default ???
那么required和default是否能同时出现在一个props变量中呢？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div> <foo-component></foo-component> </div> <script type="text/javascript" src="https://www.jb51.net/lib/vue.js"></script> <script type="text/javascript"> var fooComponent = { props: { fooMessage: { type: Number, required: true, default: 128 } }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 256 } }); </script> </body> </html>
渲染结果：
尽管控制台上Vue报了错误，但是props变量fooMessage还是使用了设置的default值。
事情不会这么简单，再测试一下其它的情况，比如当传入的参数验证不通过的时候：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div> <foo-component :foo-message="fooMessage"></foo-component> </div> <script type="text/javascript" src="https://www.jb51.net/lib/vue.js"></script> <script type="text/javascript"> var fooComponent = { props: { fooMessage: { type: Number } }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 'foobar' } }); </script> </body> </html>
渲染结果：
fooMessage要求的类型是Number，传入了一个String类型的，尽管在控制台提示报了错，但是仍然将其渲染了出来。
由此可以得出一个结论：Vue的props校验只是提供一个参考，并不是强制性的。
validator
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div> <foo-component :foo-message="fooMessage"></foo-component> </div> <script type="text/javascript" src="https://www.jb51.net/lib/vue.js"></script> <script type="text/javascript"> var fooComponent = { props: { fooMessage: { validator: function(value){ return value>=0 && value<=128; } } }, template: '<div> {{ fooMessage }} </div>' }; var vm = new Vue({ components: { 'foo-component': fooComponent }, el: '#app', data: { fooMessage: 100 } }); </script> </body> </html>
一个综合的例子
props: { // fooA只接受数值类型的参数 fooA: Number, // fooB可以接受字符串和数值类型的参数 fooB: [String, Number], // fooC可以接受字符串类型的参数，并且这个参数必须传入 fooC: { type: String, required: true }, // fooD接受数值类型的参数，如果不传入的话默认就是100 fooD: { type: Number, default: 100 }, // fooE接受对象类型的参数 fooE: { type: Object, // 当为对象类型设置默认值时必须使用函数返回 default: function(){ return { message: 'Hello, world' } } }, // fooF使用一个自定义的验证器 fooF: { validator: function(value){ return value>=0 && value<=100; } } }