10Vue组件参数校验和非Props特性

1.组件参数校验

一个父组件向子组件传值的代码：

<body>
    <div id="app">
        <child content="hello"></child>
    </div>
    
</body>
<script>
    Vue.component('child',{
        template:'<div>{{content}}</div>',
        props:['content']
    })
     var vm=new Vue({
        el:"#app",
        data:{
        }
    })
</script>

如果需要做参数校验，比如content必须传字符串,就将props由数组形式改为对象形式，然后进行参数校验。

    Vue.component('child',{
        template:'<div>{{content}}</div>',
        props:{
            content:String //此时content必须为字符串
        }
    })

这时候如果传入的content是一个数字，这里content前面需要加冒号，才能传递进去数字，如下：

<child :content="1"></child>

就会报一个警告：

 

 如果需要传递数字，那就把String改为Number。

props:{
            content:Number 
        }

 

如果希望传递参数是数字或者字符串，可以这样写：

props:{
            content:[Number,String ]
        }

 

除了数组方式，还可以是对象校验方式

props:{
            content:{
                type:String,
                required:true
            }
        }

这句话的意思是，content是String类型，并且是必传的参数，如果父组件不传这个参数，就会报错。

如果是多种类型：

 props:{
            content:{
                type:[String,Number],
                required:true
            }
        }

除了require之外，我们还可以写default，在父组件没有传参的时候，就会使用default的属性值，如果传递了参数就使用传递的参数。

<!-- default不传任何的内容 -->
<child></child>
 props:{
            content:{
                type:[String,Number],
                required:false,
                default:"default"
            }
        }

 

还可以限制content的长度，函数返回false就是不符合。validator就可以实现自定义校验

 props:{
            content:{
                type:[String,Number],
                validator:function(value){
                    return (value.length>5)//属性值长度必须大于5
                }
            }
        }

2.非props特性

props特性：子组件的props中声明了content,而父组件也传递了content，两个是对应的。有两个特性，一个是dom上不会显示属性，另一个是子组件可以通过this来获取传递的值，或是通过差值表达式直接显示。

 

非props特性是父组件传递一个属性，而自子组件并没有声明这个属性。子组件是无法获取到这个属性的。而且这个属性会显示在dom上面。

posted @ 2020-12-19 17:51  ellenxx  阅读(137)  评论(0)  编辑  收藏  举报