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属性的，只有定义为对象类型才存在
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
