Vue子元件prop型別和預設值

1、設定prop的資料型別有什麼好處？

細緻的 prop 定義有兩個好處：

a、它們寫明瞭元件的 API，所以很容易看懂元件的用法；

b、在開發環境下，如果向一個元件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源。

例如：

props:['status'],

#good:

props:{
    status:String
}

#better:

// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function
 
 (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

###注意 props 會在元件例項建立之前進行校驗，所以在 default 或 validator 函式裡，諸如 data、computed 或 methods 等例項屬性還無法使用。

2、資料型別為Array、Function、Object時的寫法

//接收的資料型別為陣列
arr: {
type: Array,
 
default: () => {
return []
}
},

//接收的資料型別為函式
fun: {
type: Function,
default: () => () => {}
},

//接收的資料型別為物件
obj: {
type: Object,
default: () => ({})  //這裡是注意是括弧，必須是括弧。
}