Vue(Vue2+Vue3)——33.props配置

2023-06-20 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue(Vue2+Vue3)——33.props配置

33 props配置

像el，data，watch，methods...都是vue的配置项，props也是一个配置项

props主要用来实现组件复用，并且动态绑定数据,它有3种使用方式，下面一一说明

通过案例进行分析使用props配置学习如何使用以及作用

33.1 编写案例

这里简单写了一个student组件，内容如下，这时候如果别人想用这个student组件，但是想要的数据不是这样的，比如学生姓名叫李四，这时候就需要修改组件模板了

首先，因为msg可以复用，所以不需要改，不确定的数据不能直接在组件的data中定义，而是要定义在props里面

33.2 props使用方式1(简单接收)

这种方式是最简单的，直接使用，收到什么参数就使用什么参数，不进行出来

在使用props配置的时候，可以定义成一个数组，把属性定义在里面，顺序可打乱，但是名称一定要对

使用组件的时候，可以动态指定数据，key一定要对得上！

通过开发者工具可以看到，三个props里面的属性

33.3 一个坑

如果有这么一个需求，学生年龄传入的是18，但是实际年龄需要+1，这时候要怎么写呢？

如果只是简单的在显示age的地方直接+1

可以看到，并没有执行，而是直接拼接了

这时候可以在组件传入age参数的时候，给age加一个:,也就是v-bind的缩写，表示以表达式的方式处理

再次查看，解决问题

虽然使用v-bind(:)可以解决类似问题，但是某一天别人使用模板的时候没有或者忘了写: ，那么将会导致页面数据展示有误，有什么办法可以避免这个问题呢？

最好的办法就是接收属性的时候，不要什么都收，只把符合条件的收了或者告诉使用者，传入的参数不对，那么我们想要限制，可以这么写

33.4 props使用方式2(对象接收)

这种方式稍微复杂一些：会对接收的参数进行判断(对数据格式进行限制)，如果不符合要求会在控制台报错

props对象接收:把props写成对象的格式，里面是一组组的key value ,key就是属性value就是对应的数据类型

如图，我直接传入age参数，系统判断不合法，直接报错，说参数类型不合法

当然，如果加上:即可解决了

33.5 props使用方式3(对象接收升级版)

这种写法是最复杂的，也是最完整的，把props写成对象，每一个属性也写成对象，里面一共有三个属性：type(指定参数类型)，default(指定默认值)，required(指定是否必须传入,true:是)

props:{
            name:{
              type:String, //name的类型是String
              required:true //name必须传入
            },
            age:{
               type:Number, //age的类型是Number
               default:99  //age不是必须传入,如果不传默认99
            },
            sex:{
               type:String, //sex的类型是String
               required:true //sex不是必须传入
            }
        }