Vue中的配置项props

最新推荐文章于 2024-04-07 16:37:55 发布

Lemon_dingding

最新推荐文章于 2024-04-07 16:37:55 发布

阅读量163

点赞数

分类专栏： Vue专辑文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_45954420/article/details/123316963

版权

Vue专辑专栏收录该内容

30 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中父组件如何向子组件传递数据，包括三种props的使用方式：基本传递、类型限制以及包含默认值和必要性的限制。同时强调了props的只读性质，如果需要修改，应将props值复制到data中再操作。

摘要由CSDN通过智能技术生成

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

(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中的数据