vue 属性props定义方法

vue 属性props定义方法

当子组件接收父组件传过来的值的时候,我们一般有两种方式来接收

不过大家好像都用第二种方式,我只有在不确定数据类型的时候才用第一种方式

第一种:

export default {
    // 不检测类型,全盘接受
    props: ["customer_id"],
}

第二种:

 export default {
   props: {
     // 基础类型检测 (`null` 意思是任何类型都可以)
     propA: null,
     // 多种类型
     propB: [String, Number],
     // 必传且是字符串
     propC: {
       type: String,
       required: true
     },
    // 数字，有默认值
     propD: {
       type: Number,
       default: 100
     },
     // 数组/对象的默认值应当由一个工厂函数返回
     propE: {
       type: Object,
       default: function () {
         return { message: 'hello' }
       }
     },
     // 自定义验证函数
     propF: {
       validator: function (value) {
         return value > 10
       }
     }
   }
 }

箭头函数写法

props: {
    List: {  //字符串
      type: String,
      default: ''
    },
    List: {  //数值
      type: Number,
      default: 0
    },
    List: {  //布尔值
      type: Boolean,
      default: true
    },
    List: {  //数组
      type: Array,
      default: () => []
    },
    List: {  //对象
      type: Object,
      default: () => ({})
    },
    List: {  //方法
      type: Function,
      default: function () { }
    }
  }

普通写法

    props: {
        List: {
            type: Array,
            default () {
                return []
            }
        },
        List: {
            type: Object,
            default () {
                return {}
            }
        },
    },

转载：https://www.cnblogs.com/jun-qi/p/10931641.html