学习VUE第十一天课程（VUE之组件（VUE之组件（Props特性深析））

r囧r小猫 2023-06-11 03:18 17阅读 0赞

# VUE之组件（Props特性深析） #

### 本节总结罗列下组件传参props的相关细节点，大纲如下 ###

**1、Props命名风格  
2、Props动态和静态  
3、组件参数Props校验  
4、非Props特性与Props特性  
5、$attrs和inheritAttrs继承属性**

## Prop命名风格 ##

**创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 prop 的由来。  
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中  
注意：一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop**

### （1）Prop 的命名风格 ###

**①PascalCase首字母大写命名即大驼峰法  
②camelCase 小驼峰命名法  
③kebab-case 短横线分隔命名法**

#### 注意： ####

**HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名**

## （1）Prop 的命名风格，案例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

## Prop 动态和静态 ##

**（1）静态Prop  
如下所示，你已经知道了可以像这样给 prop 传入一个静态的值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
**（2）动态Prop  
prop 可以通过 v-bind 动态赋值，对上述案例稍作修改**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# props传值格式 #

**这里介绍下props传值时的细节点  
props传值格式：props传值时，如果属性添加了:则会将后面的属性值理解为表单式，否则将会理解为字符串**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

# 组件参数props校验 #

**前言：  
目前为止，我们只看到了以字符串数组形式列出的 prop，如下所示**  
![在这里插入图片描述][20191028190042648.png]**Prop类型：  
如果希望每个 prop 都有指定的值类型，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型，如下所示：**

# Prop类型： #

![在这里插入图片描述][20191028190129511.png]

##### 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告 #####

## 组件参数校验： ##

**父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。**

### 案例： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

### 组件参数校验—基础验证： ###

**需求：子组件要求父组件传递过来的值必须是数字（此时props可以改成对象格式，对象的键为接收的参数名字，值为数据类型）  
此时，如果父组件传递的值类型不满足数字，即报错**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**组件参数校验—多类型验证：  
需求改进：  
子组件接收的数据类型为数字或者字符串，即传递过来的数据类型要么为Number，要么为String。  
此时可以借助数组语法**  
![在这里插入图片描述][20191028190340694.png]  
**组件参数校验—复杂验证(必填项)：**  
**参数校验规则除了上述简单的类型与多类型校验外，还可以执行更复杂的校验，如下所示：**  
![在这里插入图片描述][20191028190421117.png]  
**组件参数校验—复杂验证(必填项)：  
必填项校验，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]  
**组件参数校验—复杂验证(默认项)：  
require设置为false时，则为非必填项；此外，还可以设置default默认项。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]  
**组件参数校验—复杂验证(默认项)：  
如果父组件传值，则会覆盖默认值**  
![在这里插入图片描述][20191028190529740.png]

**小结：  
1、非必填时，如果未传值，则会显示默认值  
2、如果传值，则会覆盖默认值**

### 组件参数校验—复杂验证(自定义校验)： ###

**除了上述校验外，还可以定义更复杂的校验，使用validator(校验器)可以实现自定义校验。  
案例：要求所传参数数值必须在18-50之间**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]  
**组件参数校验—复杂验证(自定义校验)：  
如果父组件传参不满足自定义校验范围，则会报错**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]  
**组件参数校验简介：  
组件参数校验即子组件接收父组件传递参数时，执行数据校验**

#### 分类类型： ####

**①基础数据类型type校验  
②多条件数据类型type校验\{\[\]\}  
③必填项required校验  
④默认值default校验  
⑤自定义校验器validator校验**

## 非props特性与props特性 ##

**非props特性与props特性  
props特性：父组件传递属性时，子组件的props里声明了对父组件所传属性的接收，即子组件通过props接收父组件所传属性。  
非props特性：父组件传递属性时，子组件的props里没有声明对父组件所传属性的接收，即子组件没有通过props接收父组件所传属性。**

### 场景： ###

**vue中默认情况下，调用组件时，如果传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（class和style例外），而这些“非法”的属性会记录在$attrs属性上。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][20191028190814267.png]  
**props特性：父组件传递属性时，子组件的props里声明了对父组件所传属性的接收，即子组件通过props接收父组件所传属性。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]  
**非props特性：父组件传递属性时，子组件的props里没有声明对父组件所传属性的接收，即子组件没有通过props接收父组件所传属性。  
改动上述案例，去除props传递属性步骤，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]

# $attrs和inheritAttrs属性 #

### 场景： ###

## $attrs和inheritAttrs案例验证步骤图： ##

![在这里插入图片描述][20191028191258406.png]  
![在这里插入图片描述][20191028191303306.png]  
**$attrs和inheritAttrs案例验证步骤图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]

### 场景： ###

**想象一下，你打算封装一个自定义input组件——→my-input，需要从父组件传入type，placeholder，title等多个html元素的原生属性。此时组件的props如下：**  
![在这里插入图片描述][20191028191420411.png]  
**很丑陋不是吗？$attrs专门为了解决这种问题而诞生，这个属性允许你在使用自定义组件时更像是使用原生html元素。比如：**  
![在这里插入图片描述][20191028191433828.png]

### my-input的使用方式就像原生的input一样，而且my-input并没有设置props，如下 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]

# 课堂总结 #

**1、props是用来接收父组件数据的，子组件不可以直接更改props接收的数据，即单向数据流概念。  
2、非props特性：  
①子组件未通过props接收，不能显示在dom上；  
②子组件模板内直接写入内容而非插值表达式，会显示在dom最外层标签上  
3、props特性：概括为父组件传，子组件接,dom标签内直接用。  
4、props的值可以是两种，一种是字符串数组，一种是对象；  
5、props中声明的数据与组件data函数return的数据主要区别  
①props的来自父级  
②data中的是组件自己的数据，作用域是组件本身  
③这两种数据都可以在模板template及计算属性computed和方法methods中使用。  
6、inheritAttrs继承属性+ a t t r s 属 性 ， 即 可 解 决 非 p r o p s 属 性 带 来 的 问 题 7 、 attrs属性，即可解决非props属性带来的问题 7、 attrs属性，即可解决非props属性带来的问题7、attrs–继承所有的父组件属性（除了prop传递的属性、class 和 style ）  
8、inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承  
9、$attrs与inheritAttrs：用在父组件传递数据给子组件**

### 如有问题或者疑问请留言联系小编！！！ ###

### 感谢来访！！！！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/05f69d4b143945809d70bc02ac37d88e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/7d95366ee299440f835c7ac4c2779371.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/65cc856e7922474daeca60253b1c3968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/0e4805dbaec646be8b1e18e1c3056cf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/5610231290ba43d5bb59498900cc574f.png
[20191028190042648.png]: /images/20230531/309ff59010914505ad23994a0915ccb6.png
[20191028190129511.png]: /images/20230531/bb15eae211c34a209bab53cef7e1401d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/a2e04967a54a4bcba0227cec01313aa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/03739b75637d4acfbb5e8edda667f753.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/ba702fa7f676403d882ca74cab1bb4d2.png
[20191028190340694.png]: /images/20230531/2ac7f3b1d4ae4462a4c140e7db1c0638.png
[20191028190421117.png]: /images/20230531/c1d34df9ebf8447993271dc6f7bdbd84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/ddb1cb44702b45ba9784f14281f43f7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/5a780033a5fb42629f06d7cac26b6a01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/d154c8602d664b209271b7f6ae2b8b30.png
[20191028190529740.png]: /images/20230531/aee366813fb54b0da574a3a0b0a46036.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/919efc77ed004f37bf510610c27abd4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/a70f62b0e9cd40afa828827b69616a7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/6e1228001ea3407b85a1d669ba17a146.png
[20191028190814267.png]: /images/20230531/4bfcffe8e9de4a4b9aa84a963e76f5d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/4a08b619714d49fe9c557fb3993c3429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230531/1e3ad2e9e0f6400c9a6e042d3b7191ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: /images/20230531/2c655ca10fc140c7b787f5d585d57c83.png
[20191028190911246.png]: /images/20230531/ea47ce42fe2846b4a62870c7afd37a58.png
[20191028190924418.png]: /images/20230531/a22c39217d9948adac5af791607fd68c.png
[20191028191227571.png]: /images/20230531/2cc6b99ef9464a32b596e0b33af0dc8d.png
[20191028191028216.png]: /images/20230531/1b067daea04d4bc98d73e99a0f4d9c64.png
[20191028191258406.png]: /images/20230531/bd09352459b340f59f9a8376a7d81934.png
[20191028191303306.png]: /images/20230531/07eff3d9d84e43779c22b6cc9afcc2cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]: /images/20230531/fa190a8086b34a1babba318e7d5812f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 18]: /images/20230531/9d652c5eaec94783b688026e9622cd47.png
[20191028191420411.png]: /images/20230531/d16e7168041344699a79bcf85953ae89.png
[20191028191433828.png]: /images/20230531/f60def6d12fa4a7294eb760236e7c4ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 19]: /images/20230531/0da435f79f654f11a5e9a01ce3928603.png