本文最后更新于2019年3月11日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
组件参数校验指的是父组件向子组件进行参数传递，子组件有权对这个参数进行一些约束，我们一起来看一下实例
组件参数校验
- <div id="root">
- <child content="hello world!"></child>//参数传递
- </div>
- <script>
- Vue.component('child',{
- props:['content'], //接收参数
- template: '<div>{{content}}</div>' //接收后通过插值表达式使用content
- })
- var vm = new Vue({
- el: "#root"
- })
- </script>
如果我们有这样一个需求，比如我们希望传递过来的参数是字符串类型的，那么我们可以这样写，只需要将上面代码的第7行改为：
- props: {
- content: String
- }
意思是子组件接收到的content属性必须是一个字符串类型，那么如果内容不是字符串类型会怎样呢？我们可以试一下将上面代码的第2行改为：
- <child :content="123"></child>
然后我们会发现报错了，报错提示：
将第7行代码改为就不会报错了：
- props: {
- content: Number
- }
如果我们想要同时满足两种情况呢？数字or字符串？要怎么写呢？可以这样写，将number和string放在一个数组里面：
- props: {
- content: [ Number, String]
- }
当然还有更复杂的约束，比如这样的：
- props: {
- content: {
- type: String, //约束传递的参数为string类型
- required: true,//content属性必须传，值为true时缺少content则会报错，反之不报错
- default: 'defaule value', //content属性不存在时，差值表达式content默认显示内容
- validator: function (value) {
- return (value.length > 5) //传入的content值需要大于5，满足为true，不满足为false并且console报错
- }
- }
- }
非props特性
什么是props特性？当父组件使用子组件的时候通过属性向子组件传递参数的时候，刚好子组件声明了对父组件传递属性的接收，因此就有了一个对应关系，我们称这种形式的属性为props特性。
什么是非props特性？有以下两点：
父组件向子组件传递数据，子组件没通过props接收
- <div id="root">
- <child content="hello world!"></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div>{{content}}</div>' //接收后通过插值表达式使用content
- })
- var vm = new Vue({
- el: "#root"
- })
- </script>
content属性展示在子组件最外层dom标签属性里面
- <div id="root">
- <child content="hello world!"></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div>hello</div>'
- })
- var vm = new Vue({
- el: "#root"
- })
- </script>
显示效果与代码结构：
微信小程序
互联网开发，终身学习者，欢迎您的关注！
