Vue props实现父组件给子组件传递数据的方式
更新时间：2023年10月26日 10:02:01 作者：柳穿鱼^
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中的数据：
到此这篇关于Vue props实现父组件给子组件传递数据的方式的文章就介绍到这了,更多相关Vue props传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
这篇文章主要介绍了Vue项目如何实现切换主题色思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue-cli在 history模式下的配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
文章介绍了如何使用Vue+Echarts3D实现地图效果,并分享了index.vue组件和mapOptions.js的核心方法,希望对大家有所帮助2025-12-12
这篇文章主要介绍了Vue 集成 storybook的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了vue中使用mockjs配置和使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
文章介绍了在Vue3项目中实现错误捕获和邮件报错上报的方法,首先使用了`errorHandler`全局错误捕获,接着通过Nodemailer发送邮件实现错误上报功能,过程中遇到一些坑,如需本地调试需用node启动服务,同时总结了两种方案的,包括直接存在的问题和限制2026-04-04
今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论