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

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

1、父子间传值

• 父传子
  • 在子组件使用 props 选项接收父组件的数据。

<template>
	<div><com-child :value="父组件数据">com-child>div>
template>
1
2
3
4

2

1
2
3
4
5
6
7
8
9
10
11
12
13

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 () { }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

2.1、props简略写法

一般情况下
props写法

props：{
	obj: {
		  type: Object,
		  default: () => {}
	},
	arr: {
		type: Array,
		default: () => []
	}
}
1
2
3
4
5
6
7
8
9
10

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

props：{
	obj: {
		  type: Object,
		  default: function () {
		  	return {
				obje: ''
			}
		  }
	},
	arr: {
		type: Array,
		default: function () {
		  	return []
		  }
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
     }
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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: () => ({})  // 对象类型，默认{}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26