vue中props设置默认值-父组件给子组件传值的写法——简略 带类型 带类型和默认值 带校验

vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验

1、父子间传值

<!-- 父组件 --><template><div><com-child :value="父组件数据"></com-child></div></template>

2

<!-- 子组件 --><template> <div>{{value}}</div></template><script>export default {// 父传子数据特点 只读props:['value'] //写法一}</script>

2、props写法汇总

// 写法一：常规写法props:['value']//写法二：带有类型写法props: {fieldString: String,fieldNumber: Number,fieldBoolean: Boolean,fieldArray: Array,fieldObject: Object,fieldFunction: Function}// 写法三：带有类型和默认值写法props: {fieldString: {type: String,default: ''},fieldNumber: {type: Number,default: 0},fieldBoolean: {type: Boolean,default: true},fieldArray: {type: Array,default: () => []},fieldObject: {type: Object,default: () => ({})},fieldFunction: {type: Function,default: function () {}}}

2.1、props简略写法

一般情况下

props写法

props：{obj: {type: Object,default: () => {}},arr: {type: Array,default: () => []}}

但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。

应该使用以下有默认值的写法

props：{obj: {type: Object,default: function () {return {obje: ''}}},arr: {type: Array,default: function () {return []}}}

2.2、带有校验的写法

我们可以为组件的 prop指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

这在开发一个会被别人用到的组件时尤其有帮助。

props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型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 ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

3、示例

vue中prop会接收不同的数据类型**，这里列出了 常用的数据类型的设置默认值的写法,其中包含：Number, String, Boolean, Array, Function, Object。

refAge: {type: Number,default: 0 // 数字类型，默认0},refName: {type: String,default: '' // 字符串类型，默认''},hotDataLoading: {type: Boolean,default: false // 布尔类型，默认false},hotData: {type: Array,default: () => {return [] // 数组类型，默认[]}},getParams: {type: Function,default: () => () => {} // 函数类型，默认{}},meta: {type: Object,default: () => ({}) // 对象类型，默认{}}