Vue组件参数校验和props特性

组件参数校验

定义一个组件

Vue.component('test',{
    template:`
        <p>{{msg}}</p>
    `,
    props:{
        msg:{
            type:[String,Number],
            required:true,
            default:"default Date"
        }
    }
})

组件中传递数据,需要制定在组件的props

<test :msg="1122456"></test>

之前我们都是定义在数组中,那么我们该如何校验这个数据是否符合我们的要求呢?

其实我们可以在组件中把这个props换成一个对象,看到上述代码,type可以为一个数组,来判断这个传递的数据的类型,不符合则报错,required表示这个参数必须填写,default表示在required为false,且未指定时候显示default数据

props特性和非props特性

通常下,我们在父级组件传递了数据,需要在组件中接收这个属性,到props,那么我们不接收在props,直接使用会怎么样?我们来看一下

<wat msg="hello world"></wat>

定义这个wat组件,但是我们不接收这个附带的数据

Vue.component('wat',{
    template:`
        <p>{{msg}} </p>
    `
})

运行后发现,被抛出了一个msg提示underfinde的错误

    我们不接收这个props,而且调用时候也不用这个数据,看是否可以使用

发现可以正常使用,这个附带的组件属性被传递下来了!如果是正确调用了则这个属性不会显示!

这个props属性,声明了就能用,不声明无法使用,声明且使用这个属性不会保留在标签的属性中!