详细聊聊vue中组件的props属性


Posted in Vue.js onNovember 02, 2021

今天这篇文章,让你彻底学会props属性……

props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。

问题一:那props具体是怎么使用呢?原理又是什么呢?往下看

1、【定义被调用组件】首先,我们先定义一个person组件,用于显示个人信息的组件,我们放了一个人的姓名,性别,以及年龄,定义好这个组件之后,就可以等待其他组件进行调用。那么既然别的组件可以调用,我们就需要再定义一个props属性,用于接收别的组件传进来的值。

详细聊聊vue中组件的props属性

 注意:组件中name、sex、age都是一个prop,将三个属性放到一起,就是props,这就是props的由来,是prop的复数形式,代表多个prop属性的集合。

 2、【调用组件】此时我们再定义一个info组件,用于展示这个人的基本信息,进行对person组价的调用实现信息的展示,分为下图四个步骤进行调用。并传入参数

详细聊聊vue中组件的props属性

 3、【看效果】传入成功。

详细聊聊vue中组件的props属性

 问题二:那如果我们想给年龄加1岁,怎么实现?

我们可能会直接这样加1

详细聊聊vue中组件的props属性

 看效果是否能实现,变成19,看下图显然是不正确的。因为你传入的年龄是个字符串18,所以加1只会在18后面进行拼接。

详细聊聊vue中组件的props属性

 然后有的人说,那传数字,怎么传数字呢?很简单,一个符号搞定。

我们只需要在age前面加上冒号 :他就会只识别双引号里面的东西18 ,否则识别的是双引号18

详细聊聊vue中组件的props属性

 看下效果,此时就成功了。

详细聊聊vue中组件的props属性

 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?

肯定是数字类型,但是有人非要传字符串类型,就会影响我们对年龄的计算,比如上面的加1……那么我们如何限制类型呢?

 这时候props不能再用[]去定义,需要用{},因为限制类型时,props就是作为一个对象去使用;

下面就是我们将三个属性分别做了限制。

详细聊聊vue中组件的props属性

 我们把年龄做了number类型限制后,再传入字符串18,看有什么变化?

详细聊聊vue中组件的props属性

 此时发现控制台,会报错,显示age的数据类型不匹配。

详细聊聊vue中组件的props属性

 虽然不影响展示,但是会报错。这可以给我们提供一个明确的提示。方便我们规范的传入数据。

 详细聊聊vue中组件的props属性

 问题四:可以限制类型,那是不是也可以限制是否必传呢?

 答:当然可以。

假设姓名必传,其他非必传。

类型属性:type:xx

必传属性:required:true

默认属性:default:xx

详细聊聊vue中组件的props属性

 name必传,那么我们不传试试,年龄不传默认18

详细聊聊vue中组件的props属性

 结果,控制台同样报错,提示,name是必传属性。年龄我们没传,也成功展示的是默认值,19是因为一开始对年龄进行了加1操作,这样我们就成功对属性进行了限制。

详细聊聊vue中组件的props属性

 详细聊聊vue中组件的props属性

对以上总结:

props在接收数据的同时,对数据进行了类型限制+默认值的指定+必要性的限制

问题五:props接收的属性值可以修改吗?

答:不可以

我们添加一个button,以及点击事件

详细聊聊vue中组件的props属性

 注意:我们要访问props里面的属性值,通过this.即可找到

 详细聊聊vue中组件的props属性

 查看结果,发现页面可以显示,但是控制台报错,因此它是不可修改的

详细聊聊vue中组件的props属性

详细聊聊vue中组件的props属性

 问题六:必须要修改props属性值,怎么办?

 答:通过data去间接修改

我们在data里面重新定义一个变量去接收props属性。这个变量最好不要重名,重名的话,优先获取props属性值,优先级props>data。然后我们在操作或者html绑定值的时候,都去操作data里面新定义的变量

详细聊聊vue中组件的props属性

 此时可以看到,修改成功,也没有报错:

详细聊聊vue中组件的props属性

 总结:配置项props

-------让组件接收外部传来的数据

 接收数据三种方式:

(1)只接收:props: ['name','age','sex']

(2)接收并限制类型:props: { "name":Number }

(3)限制类型、限制必要性指定默认值:

props:{
        "name":{
            type:String,
            required:true
        },
        "age":{
            type:Number,
            default:18
        },
        "sex":{
            type:String,
            default:'男'
        },
    },

注意:props是只读的,vue底层会检测你对props的修改,如果进行了修改,控制台会报错,必须修改,就复制一份到data中,通过data去修改数据。

总结

到此这篇关于vue中组件的props属性的文章就介绍到这了,更多相关vue组件的props属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
一定要知道的 25 个 Vue 技巧
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
You might like
php 全局变量范围分析
2009/08/07 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
阿里旅行:飞猪
2017/01/05 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
行政文员岗位职责
2013/11/08 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
运动会开幕式致辞
2015/07/29 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
浅谈Java父子类加载顺序
2021/08/04 Java/Android