【Vue】组件 - 验证props

微信订阅号：Rabbit_svip

本节需要基础：【Vue】组件通信（父传子 props）

props主要作用是让父组件传值给子组件。

普通的传值方式做上面的链接有讲到。

---

普通传值

props: ['参数名']

普通传值，可以把要传的值放在一个数组里，也可以放在一个对象里。

传多个值

props: ['参数1', '参数2', ... '参数n']

规定参数类型

props: {
    "参数名": 类型（如 string）
}

比如

props: {
    "myName": Number
}

也可以定义多种类型，只需把所有类型都放在一个数组里面。

props: {
    "myName": [String, Number, Array]

}

指定参数为必需项（必填）

props: {
    "myName": {
        type: [String, Array],
        required: true
    }
}

设置 required: true，则该参数是必传参。
如果父组件没把该参数传过来的话，就会报错！

定义默认值

props: {
    "myName": {
        type: [String, Array],
        default: "Rabbit"
    }
}

通过 default 可以设置默认值。

当父组件没有把该参数传过来的时候，就会用定义的默认值作为值。

如果父组件有把该参数传过来的话，父组件传过来的参数值就会覆盖这个默认值。

如果设置了 default ，那么 required 就不用设置了。因为有了默认值，再设置必选项的话就没意义了。