亲宝软件园·资讯

展开

vue属性props默认类型

TianNicholas 人气:13

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属性的,只有定义为对象类型才存在 

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

加载全部内容

相关教程
猜你喜欢
用户评论