Vue props实现父组件给子组件传递数据

Vue中的配置项Props能让组件接收外部传递过来的数据。

一、传递数据

在要传递的组件标签中配置传递信息:

属性名 = "属性值"

注意:如果传递的属性值是一个表达式,要使用:属性名="属性值" 的形式。

二、接收数据

在目标组件中配置props进行数据接收:

方式一:直接接收

注意:这里的属性名和上面传递数据时配置的属性名要相同

props:"属性1", "属性2"

方式二:限制类型

可以通过限制类型的方式限制传递过来的数据类型,放置数据出错:

props:{ 属性1:类型, 属性2:类型 }

方式三:所有配置项

完整写法中我们可以对每一个接收的属性再进行单独的配置:

props:{ 属性1:{ // 配置项 }, 属性2: { // 配置项 } }

有如下配置项:

type // 属性的数据类型

required // 该属性是否为必填项

default // 若未传该属性,设置默认值

三、注意事项

Vue规定我们通过props接收过来的属性不能够修改。

如果我修改,就会进行控制台报错:

那我们如果真的想要对接收过来的数据进行修改该怎么办呢?

我们可以配置两份数据,一份是props接收过来的数据,一份是组件中data的数据,data中的数据用于修改。

因为props的优先级比data高,所以我们能在data中收到props中的数据:

相关推荐
白帽攻防录7 小时前
SRC 挖洞:PostScript 打印机驱动双 RCE,打印服务器怎么变成内网跳板
开发语言·网络安全·php·内网安全
十年Java程序媛7 小时前
Java枚举Enum完整教程|替代静态常量,开发与面试要点
java·开发语言·spring boot·后端·面试
2603_965148117 小时前
电商选品调研:通过关键词搜索API获取市场热销商品,结合商品详情API分析竞品卖点与定价
开发语言·数据库·人工智能·python·信息可视化
lpfasd1237 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
xixiaoyunya8 小时前
Python 异步编程入门:用 asyncio 轻松实现并发任务
开发语言·python·php
学逆向的8 小时前
C 循环结构的执行效率分析
c语言·开发语言·数据结构·网络安全
小坏讲微服务9 小时前
刚发布一个月的JDK 27,为什么我建议你立刻升级?
java·开发语言·spring boot·spring·架构·求职招聘·springboot4
Data analyse45610 小时前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai10 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
打工仔折腾 AI10 小时前
用 Dashlet 把极空间 NAS 服务入口整理成统一导航首页的实践
java·开发语言·人工智能·后端·python·rpc·ai agent 实战