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

相关推荐
jiayong231 分钟前
第 44 课:任务详情抽屉里的评论输入与操作记录联动
前端
ndsc_d2 分钟前
前端实战复盘:用AI直接生成响应式官网落地页与React源码
前端·人工智能·react.js·ui·前端框架·aigc·paico
LongtengGensSupreme11 分钟前
C#图像内存高速拷贝:使用Marshal.AllocHGlobal与ArrayPool实现内存拷贝的几个方法
开发语言·数码相机·c#
Java面试题总结11 分钟前
Python,单引号和双引号有何区别
开发语言·python
鱼子星_20 分钟前
【C++】内存管理:内存分布,new/delete的使用及细节处理,new/delete的底层,定位new表达式
开发语言·c++·笔记
学逆向的23 分钟前
汇编——函数
开发语言·汇编·网络安全
咸鱼翻身小阿橙37 分钟前
多线程解析
java·开发语言
AOwhisky1 小时前
Python 学习笔记(第四期)——字符串:格式化、操作与文本处理——核心知识点自测与详解
开发语言·笔记·python·学习·列表·元组·字典
大家的林语冰1 小时前
✌️ Deno 2.9 来了,ESM 直接导入 CSS,甚至能开发桌面应用?!
前端·javascript·node.js
李顿波1 小时前
前端样式技术发展进程和解析(长期更新版)
前端