vue props数据传递类型限制方式

目录 vue props数据传递类型限制 1.第一种：不限制任何数据 2.第二种：只限制数据类型 3.第三种：限制数据类型 必要参 默认值 Vue中的配置项props (1).传递数据（父组件传递数据） (2).接收数据（子组件接收数据）

vue props数据传递类型限制

1.第一种：不限制任何数据

props: ['test', 'test1'],?

2.第二种：只限制数据类型

props: {
? ? test: String,
? ? test1: Number
? },?

3.第三种：限制数据类型 必要参 默认值

? props: {
? ? test: {
? ? ? type: String, // 字符类型
? ? ? required: true // 必要条件
? ? },
? ? test1: {
? ? ? type: Number, // 字符类型
? ? ? default: 99 // 默认值
? ? },
? },

Vue中的配置项props

功能：让组件接收外部传入的数据 向子组件传递数据

(1).传递数据（父组件传递数据）

< Student name="李四" :age="18" sex="女"/>

(2).接收数据（子组件接收数据）

第一种方式（只接收）

简单的声明接收

props:['name','sex','age']?

第二种方式（限制类型）

接收的同时对数据进行类型限制

?props:{
? ? ? ? ? ?name:String,
? ? ? ? ? ?age:Number,
? ? ? ? ? ?sex:String
? ? ? ? ?}?

第三种方式（限制类型、限制必要性、指定默认值）

接收数据的同时：进行类型数据限制+默认值+必要性的限制

?? ?props:{
? ? ? ? ? ? ? ? name:{
? ? ? ? ? ? ? ? ? ? type:String, //name的类型是字符串
? ? ? ? ? ? ? ? ? ? required:true //name是必要的
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? age:{
? ? ? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? ? ? default:99 //默认值
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sex:{
? ? ? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? ? ? required:true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改。就会发出警告，

若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后去修改data中的数据

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

查看更多关于vue props数据传递类型限制方式的详细内容...