Vue子组件prop类型和默认值

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: () => ({})  //这里是注意是括弧,必须是括弧。
}

 

posted @ 2020-07-13 16:47  Chenxi_Liu  阅读(4150)  评论(0编辑  收藏  举报