props验证类型
props属性,用于接收别的组件传进来的值
props传的值与验证的类型不一样,会报警告,但不会打断进程(代码会继续执行)
props是只读的,如果进行了修改,控制台会报错。必须修改的话,需要复制一份到data中,通过data去修改数据。

vue2:
组件中name、sex、age都是一个prop,将三个属性放到一起,就是props,这就是props的由来,是prop的复数形式,代表多个prop属性的集合
在这里插入图片描述
定义一个info组件,用于展示这个人的基本信息,进行对person组件的调用实现信息的展示,分为下图四个步骤进行调用。并传入参数
在这里插入图片描述
效果:
在这里插入图片描述
给年龄加1岁,怎么实现?
{{age+1}}会识别为字符串,结果会变为181
解决方法
在调用组件时可把age变为变量(:age)
在这里插入图片描述
或者加上类型验证
这时候props不能再用[]去定义,需要用{}因为限制类型时,props就是作为一个对象去使用
在这里插入图片描述
props中可以通过this获取到,但不可修改,修改会报错
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一定要修改,通过data去间接修改
data里面重新定义一个变量去接收props属性。这个变量最好不要重名重名的话,优先获取props属性值优先级props>data。然后我们在操作或者html绑定值的时候,都去操作data里面新定义的变量
在这里插入图片描述
接收数据三种方式
在这里插入图片描述

原文:https://blog.csdn.net/qq_41579104/article/details/120997444

vue3:
在这里插入图片描述
如果nullundefined验证不出来的

defult可以放入一个默认值
defult也可以是一个函数返回一个对象或值
注意:
在这里插入图片描述
总结:
在这里插入图片描述

组件属性继承
如果在components中设置inhertAttrs(继承属性)为false,leo-aa标签上写的class、data-bb和事件@change都不会出现在html中的input上等于就是没写

注意:
在这里插入图片描述
inheritAttr默认是true,不写的话leo-aa上写的class和事件都会继承到组件的temlplate中写的内容上

正常template最外部只有一个标签,可继承
在这里插入图片描述

注意
template里如果有多个同一层级(最外部)标签会无法传递属性,并报警告
在这里插入图片描述
在这里插入图片描述
解决方法:
在需要的标签上绑定$attrs
写法:

v-bind:‘$attrs’

在这里插入图片描述
效果:
在这里插入图片描述
总结:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐