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: () => ({})  //這里是注意是括弧，必須是括弧。
}