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

相关推荐
明月_清风5 分钟前
Nginx 生产环境配置完全指南:从安全加固到性能调优
前端·nginx
用户600071819107 分钟前
【翻译】用 Reanimated CSS 动画为 TextInput 添加发光效果
前端
李剑一13 分钟前
前后端命名冲突?驼峰与下划线的统一方案(附可直接复用代码)
前端
QH1392923188013 分钟前
Rohde & Schwarz ZNA43矢量网络分析仪的使用方法
开发语言·php
用户114818678948416 分钟前
Git Stash 丢失后的完整找回指南
前端·git
代码不加糖17 分钟前
2026 React 面试“通关秘籍”:高频 12 问 + 深度解析(含Hooks源码思想)
前端·react.js·面试
沐知全栈开发17 分钟前
SVG 实例
开发语言
我滴老baby18 分钟前
ReAct推理模式详解让智能体学会边思考边行动
前端·react.js·前端框架
geovindu20 分钟前
go: Iterator Pattern
开发语言·设计模式·golang·迭代器模式
他是龙55123 分钟前
70:Python安全 & SSTI模板注入 & Jinja2引擎 & 利用绕过 & 工具实战
开发语言·python·安全