vue属性props默认类型的写法介绍

目录

• vue属性props默认类型
• props自定义属性

vue属性props默认类型

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    //单个类型
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    //函数
    propC: {
      type:Function,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    //多个可能类型带默认值
     propE: {
      type:  [String, Number],
      default: 100
    },
    // 带有默认值的对象
    propF: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propG: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

props自定义属性

1.这是一个自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性

2.语法：可以定义为数组类型的：

export default {
    props:['init']
}

也可以定义为对象类型：

export default {
  // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
  // props: ['init'],
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },
}

注意：数组类型是没有default属性的，只有定义为对象类型才存在 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。