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传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了IDEA安装vue插件图文，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue 中使用 watch 出现了如下的报错信息的原因分析及解决方法，本文附有代码解决方案，非常不错,需要的朋友可以参考下2019-05-05
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
这篇文章主要给大家介绍了软玉利用webpack如何搭一个vue脚手架的相关资料，文中有超详细讲解和注释，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,下面这篇文章主要给大家介绍了关于VUE引入DataV报错解决的实战记录,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了在antd Form表单中select设置初始值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了Vue3中toRef和toRefs函数的使用方法，文中通过示例为大家进行了详细的讲解，感兴趣的小伙伴可以跟随小编一起学习一下2022-07-07
详解axios 全攻略之基本介绍与使用（GET 与 POST）
本篇文章主要介绍了axios 全攻略之基本介绍与使用（GET 与 POST），详细的介绍了axios的安装和使用，还有 GET 与 POST方法，有兴趣的可以了解一下2017-09-09
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于vue中如何使用$emit传递多个参数的2种方法,在Vue中可以使用$emit方法向父组件传递数据,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了Element-ui Dialog对话框基本使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论