vue中props值怎么在方法中使用,vue prop属性
父组件和子组件之间的通信是道具向下，事件向上。父组件通过属性props将数据向下发送给子组件，子组件通过事件事件将消息发送给父组件。本文主要介绍vue中组件道具属性的相关信息，有需要的朋友可以参考一下。
目录
问题一：道具到底是怎么用的？原理是什么？往下看问题2:那么如果我们想让自己的年龄增加1岁，怎么实现呢？问题3:对于年龄类型，我们最想要什么样的数据？问题4:可以限制类型，那么是否也可以限制是否必须通过？问题5:道具收到的属性值可以修改吗？问题6:你要修改道具属性值。我该怎么办？概要：配置项目道具今天这篇文章，让你彻底学会props属性……
Props主要用来传递组件的值，它的工作是从外部接收数据。是与data、el、ref同级别的配置项。
问题一：那props具体是怎么使用呢？原理又是什么呢？往下看
1、【定义被调用组件】首先，我们定义一个person组件，用来显示个人信息。我们把一个人的名字，性别和年龄。定义了这个组件之后，我们就可以等待其他组件调用了。然后，由于可以调用其他组件，我们需要定义另一个props属性来接收其他组件传入的值。
注意：组件名称，性别，年龄都是道具。把三个属性放在一起，就是道具，这就是道具的由来。它是prop的复数形式，代表多个prop属性的集合。
2、【调用组件】此时我们会定义一个info组件，用来显示这个人的基本信息，显示人团价格的通话实现信息。它分为以下四个步骤来调用。并传入参数。
3、【看效果】呼入成功。
问题二：那如果我们想给年龄加1岁，怎么实现？
我们可以像这样加1。
看效果能不能达到，变成19。看下图显然是不正确的。因为你传入的年龄是一串18，加1只会在18之后拼接。
然后有的人说，那传数字，怎么传数字呢？很简单，一个符号搞定。
我们只需要在age前面加上冒号:他只会识别双引号里的东西18，否则他会识别双引号18。
看效果，这一点上是成功的。
问题三：对于年龄这一类型，我们最希望拿到的是什么数据类型？
肯定是数字类型，但是有人非要传字符串类型，就会影响我们对年龄的计算，比如上面的加1……那么我们如何限制类型呢？
此时，不能再用[]，需要用{}定义props，因为props是在限制类型时作为对象使用的；
下面是我们分别对三个属性的限制。
在我们通过数字类型限制了年龄之后，我们传入字符串18来查看发生了什么变化。
当找到控制台时，将报告一个错误，显示年龄的数据类型不匹配。
虽然不影响显示，但是会报错。这可以给我们一个明确的提示。我们促进标准化的输入数据。
问题四：可以限制类型，那是不是也可以限制是否必传呢？
答：当然可以。
假设名字一定要传下去，其他的不一定。
类型属性：type:xx
必传属性：required：true
默认属性：default：xx
名字是一定要传的，所以我们尽量不要传，年龄不传默认18。
因此，控制台也报告了一个错误，提示name是一个强制属性。我们没有传年龄，成功显示了默认值。19是因为我们一开始就给年龄加了1，所以成功限制了属性。
对以上总结：
Props接收数据并对数据执行类型限制+默认值的指定+必要性的限制。
问题五：props接收的属性值可以修改吗？
答：不可以
我们添加一个按钮，并单击事件。
注意：我们需要访问props中的属性值，可以通过这个找到.
结果发现页面可以显示，但是控制台报错，所以无法修改。
问题六：必须要修改props属性值，怎么办？
答：通过data去间接修改
我们在数据中重新定义一个变量来接收props属性。这个变量最好不要同名。如果是重名，先获取道具属性值，优先级propsdata。然后，当我们操作or html绑定值时，我们都操作数据中新定义的变量。
此时，您可以看到修改是成功的，并且没有错误：
总结：配置项props
-让组件从外部接收数据。
接收数据有三种方式：
(1)仅接收：道具：[姓名，年龄，性别]
(2)接收和限制类型：道具：{name:Number}
(3)指定限制类型和限制必要性的默认值：
道具：{
名称:{
类型：字符串，
必填：真
},
年龄:
类型：数量，
默认值：18
},
性别:
类型：字符串，
默认值：“男性”
},
},
注意：props是只读的。vue底层会检测你对道具的修改。如果被修改，控制台将报告一个错误。如果必须修改，只需将副本复制到数据中，并通过数据修改数据。
这就是这篇关于vue中组件的props属性的文章。关于vue组件的props属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。