zoukankan      html  css  js  c++  java
  • 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: () => ({})  //这里是注意是括弧,必须是括弧。
    }
  • 相关阅读:
    枚举
    泛型
    装箱和拆箱
    使用TryParse()来执行数值转换
    参数数组
    checked和unchecked转换
    字符串不可变
    TCC : Tiny C Compiler (2018-2-6)
    win10 下 protobuf 与 qt
    QWebView 与Js 交互
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/13294096.html
Copyright © 2011-2022 走看看