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

2022-04-15 0 844
目录
  • 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看
  • 问题二:那如果我们想给年龄加1岁,怎么实现?
  • 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?
  • 问题四:可以限制类型,那是不是也可以限制是否必传呢?
  • 问题五:props接收的属性值可以修改吗?
  • 问题六:必须要修改props属性值,怎么办?
  • 总结:配置项props

今天这篇文章,让你彻底学会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属性内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript 详细聊聊vue中组件的props属性 https://www.niceym.com/18972.html