【Vue】元件 - 驗證props

本節需要基礎：【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 就不用設定了。因為有了預設值，再設定必選項的話就沒意義了。