说明
可以为组件的 props 指定验证要求：
- 限制数据类型（可以指定多个类型）
- 指定默认值
- 是否必填
- 。。。。
如果有一个限制条件 没有满足，在 浏览器控制台中警告，如下：
官网见 链接
实现方法
props 中的值是 一个带有 验证需求的对象，而不是 一个字符串数组
如下：
props:{//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
name:String,//关键：限制数据类型
sex:String,
age:Number
}
简单案例
创建组件
在 components 目录下，创建文件 UserInfo2.vue，内容如下：
<template>
<div id="app">
UserInfo2
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
</div>
</template>
<script>
export default {
// data:function(){
// return {
// name:'李雷',
// sex:'男',
// age:20
// }
// }
props:{//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
name:String,//关键：限制 name 的数据类型是 String
sex:String,//关键：限制 sex 的数据类型是 String
age:Number//关键：限制 age 的数据类型是 Number
}
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
使用组件-演示错误
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
传递静态Prop，传递的数据都是String类型：
<user-info2 name="韩梅梅" sex="女" age="21"/>
</div>
</template>
<script>
//引入 UserInfo2 组件
import UserInfo2 from './components/UserInfo2'
export default {
name: 'App',
components: {
'user-info2':UserInfo2 //注册局部组件
}
}
</script>
结果
在控制台中报错，因为在父组件中，静态传递Prop，数据都是 String 类；但在子组件中，限制 age 数据是 Number 类型，类型不匹配，所以报错
如下图：
使用组件-演示正确
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
传递动态Prop，演示正确：
<user-info2 name="李雷" sex="男" :age="fage" />
</div>
</template>
<script>
//引入 UserInfo2 组件
import UserInfo2 from './components/UserInfo2'
export default {
name: 'App',
components: {
'user-info2':UserInfo2 //注册局部组件
},
data:function(){
return {
fage:22
}
}
}
</script>
数据类型
限制的数据类型有：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
指定 默认值、是否必填
创建组件
修改文件 UserInfo2.vue，内容如下：
<template>
<div id="app">
UserInfo2
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
<div>爱好：<span v-for="(item,index) in likes" :key="index">{{ item }} </span></div>
</div>
</template>
<script>
export default {
// data:function(){
// return {
// name:'李雷',
// sex:'男',
// age:20
// }
// }
props:{//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
name:{
String,//关键：限制 name 的数据类型是 String
required:true//关键：必填项
},
sex:{
type:String,//关键：限制 sex 的数据类型是 String
default:'男'//关键：不传 sex时，显示默认值
},
age:{
type:Number,//关键：限制 age 的数据类型是 Number
},
likes:Array //关键：限制 likes 的数据类型是 Array
},
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
注意：
required和default一般不会同时出现一个属性可以指定多个类型，如：
type:[String,Number]，表示传入数据类型可以是String或Number
使用组件-演示错误
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
传递静态Prop，不设置 name 会报错 name是必填项 <br>
传递静态Prop，不设置 sex 会显示默认值 男 <br>
<user-info2 age="21" likes="['王者荣耀','抖音','吃鸡']"/>
</div>
</template>
<script>
//引入 UserInfo2 组件
import UserInfo2 from './components/UserInfo2'
export default {
name: 'App',
components: {
'user-info2':UserInfo2 //注册局部组件
}
}
</script>
报错如下：
使用组件-演示正确
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
传递动态Prop，不设置 sex 会取默认值 男：
<user-info2 :name="fname" :age="fage" :likes="flikes"/>
</div>
</template>
<script>
//引入 UserInfo2 组件
import UserInfo2 from './components/UserInfo2'
export default {
name: 'App',
components: {
'user-info2':UserInfo2 //注册局部组件
},
data:function(){
return {
fname:'张三',
fage:22,
flikes:['王者荣耀','抖音','吃鸡']
}
}
}
</script>