Vue之组件（Props特性深析）

左手的ㄟ右手 2023-06-11 03:18 35阅读 0赞

## 前言 ##

*  本节总结罗列下组件传参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 的命名风格，案例

<div class="app">
            <blog-component blog-title="海贼王" blog-author="尾田荣一郎"></blog-component>
        </div>
        <script type="text/javascript">
            Vue.component('blog-component',{
                props:['blogTitle','BlogAuthor'],
                template:`
                    <div>
                        <h3>文章标题为：《{
       {blogTitle}}》</h3>
                        <cite>作者：{
       {BlogAuthor}}</cite>
                    </div>
                `
            })
            var app = new Vue({ el:'.app' })
        </script>

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

*  ①在 JS中是驼峰法命名；②在 HTML 中是 kebab-case 短横线分隔命名法

## Prop 动态和静态 ##

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

## props传值格式 ##

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

## 组件参数props校验 ##

**前言：**

*  目前为止，我们只看到了以字符串数组形式列出的 prop，如下所示  
    ![在这里插入图片描述][20191028190204383.png]
 *  Prop类型：
 *  如果希望每个 prop 都有指定的值类型，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型  
    在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。如下所示：  
    ![在这里插入图片描述][20191028190311188.png]
 *  当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告
 *  组件参数校验：
 *  父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。
 *  此时，props为字符串数组传值类型，实现数据传递。案例如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  组件参数校验—基础验证：
 *  需求：子组件要求父组件传递过来的值必须是数字（此时props可以改成对象格式，对象的键为接收的**参数名字**，值为**数据类型**）
 *  此时，如果父组件传递的值类型不满足数字，即报错  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]  
    **组件参数校验—多类型验证：**
 *  **需求改进：**
 *  子组件接收的数据类型为数字或者字符串，即传递过来的数据类型要么为Number，要么为String。
 *  此时可以借助数组语法  
    ![在这里插入图片描述][20191028190900221.png]  
    ![在这里插入图片描述][2019102819092263.png]  
    子组件接收父组件传值类型为Number和String均可。
 *  组件参数校验—复杂验证(**必填项**)：
 *  参数校验规则除了上述简单的类型与多类型校验外，还可以执行更复杂的校验，如下所示  
    ![在这里插入图片描述][20191028191031167.png]  
    ![在这里插入图片描述][20191028191110596.png]  
    required为true时规定该属性为必传项，如果没有传递则报错
 *  组件参数校验—复杂验证(**必填项**)：
 *  必填项校验，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][20191028191325662.png]  
    ![在这里插入图片描述][20191028191336358.png]  
    组件调用时如果父组件不传参，则会报出警告。
 *  组件参数校验—复杂验证(**默认项**)：
 *  require设置为false时，则为非必填项；此外，还可以设置default默认项。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028191500849.png]  
    ![在这里插入图片描述][20191028191509983.png]  
    非必填情况下，没有传值时，则显示默认值
 *  组件参数校验—复杂验证(**默认项**)：
 *  如果父组件传值，则会覆盖默认值  
    ![在这里插入图片描述][20191028191605893.png]
 *  **小结：**  
    1、非必填时，如果未传值，则会显示默认值  
    2、如果传值，则会覆盖默认值
 *  组件参数校验—复杂验证(**自定义校验**)：
    
     *  除了上述校验外，还可以定义更复杂的校验，使用validator(校验器)可以实现自定义校验。
 *  案例：要求所传参数数值必须在18-50之间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20191028191452674.png]  
validator为函数格式，且接收参数value即为props传值大小，返回值为自定义校验限制范围

*  组件参数校验—复杂验证(**自定义校验**)：
 *  如果父组件传参不满足自定义校验范围，则会报错  
    ![在这里插入图片描述][20191028191926951.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]  
    ![在这里插入图片描述][20191028191452674.png]  
    翻译：无效的prop:age的自定义校验器检验失败
 *  组件参数校验简介：
    
     *  组件参数校验即子组件接收父组件传递参数时，执行数据校验
 *  **分类类型：**  
    ①基础数据类型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_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028192247714.png]
 *  props特性：父组件传递属性时，子组件的props里**声明**了对父组件所传属性的接收，即**子组件通过props接收父组件所传属性**。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028192340517.png]
 *  非props特性：父组件传递属性时，子组件的props里**没有声明**对父组件所传属性的接收，即**子组件没有通过props接收父组件所传属性**。
 *  改动上述案例，去除props传递属性步骤，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028192458128.png]

# $attrs和inheritAttrs属性 #

*  **场景：**
 *  vue中默认情况下，调用组件时，如果传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（class和style例外），而这些“非法”的属性会记录在$attrs属性上。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028192700617.png]
 *  **inheritAttrs继承属性**
 *  如何控制不把这些非法的属性渲染在组件的根元素上呢？
 *  答案是在组件内部设置inheritAttrs:false即可。  
    ![在这里插入图片描述][20191028192752698.png]  
    ![在这里插入图片描述][20191028191452674.png]  
    ![在这里插入图片描述][20191028192820981.png]
 *  **$attrs指向渲染属性：**
 *  通过v-bind="$attrs"可以把“非法”的属性渲染到指定的组件某个元素上  
    ![在这里插入图片描述][20191028192901103.png]  
    ![在这里插入图片描述][20191028192909580.png]
 *  **$attrs和inheritAttrs案例验证步骤图：**  
    == 图一如下：![在这里插入图片描述][20191028192950873.png]  
    == 图二如下：![在这里插入图片描述][20191028193027863.png]  
    == 图三如下：==  
    ![在这里插入图片描述][20191028193115906.png]  
    == 图四如下：==  
    ![图片四][20191028193124727.png]
 *  **场景：**
 *  想象一下，你打算封装一个自定义input组件——→my-input，需要从父组件传入type，placeholder，title等多个html元素的原生属性。此时组件的props如下：  
    ![在这里插入图片描述][20191028193316793.png]
 *  很丑陋不是吗？$attrs专门为了解决这种问题而诞生，这个属性允许你在使用自定义组件时更像是使用原生html元素。比如：  
    ![在这里插入图片描述][20191028193341180.png]
 *  my-input的使用方式就像原生的input一样，而且my-input并没有设置props，如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 16]

# 今日总结 #

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

## 完毕… ##

[2019102818570871.png]: /images/20230531/2be8286871a44315a7d5647d2641c39c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/16d0cf60c4f140aa8202efadd7ef974b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/e991fc080798459da6ee5b4d5d3d1abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/93ecb4d6e21f401aa41cf5cd63ffaeab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/dd2efe1b07144a959e4c68df166ab97f.png
[20191028190204383.png]: /images/20230531/aebf15f426a34150b5eee3e31d241fe6.png
[20191028190311188.png]: /images/20230531/f2b1bae3f9764dfe931ea031d8f3b77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/aa5fe180786740cbb3b952855c918270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/95b2f74124ff4c8a91c7a527d4260a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/a09f283aec5044f58132ca87c3dec671.png
[20191028190900221.png]: /images/20230531/537330e257ba437996c1e48330efb601.png
[2019102819092263.png]: /images/20230531/d9e2be753b3b4ccf9086a416e179ac7d.png
[20191028191031167.png]: /images/20230531/cd3e2420714444e7869fefa17dba8655.png
[20191028191110596.png]: /images/20230531/c5a327093ceb4a06a248abbeabfc0b65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/1b8f16b98b074429a2a9f9b3ea9af0fb.png
[20191028191325662.png]: /images/20230531/460458b0083340e689bb6f9f0943fca6.png
[20191028191336358.png]: /images/20230531/ee9a7af3f9fb473db2d9627a4f8f607f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/e69311b665004d8fba4d0b0ed0984d50.png
[20191028191452674.png]: /images/20230531/f8824c9d678447efbe89d441068bd434.png
[20191028191500849.png]: /images/20230531/9199e2f81bfc4bc8887ff8dc2ae91443.png
[20191028191509983.png]: /images/20230531/b6f7a25e99c94d62b2d87c64d6f43a14.png
[20191028191605893.png]: /images/20230531/68c356168cd5472087036875afd738b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230531/df976eff472845eb8c0b9627ea7d2a29.png
[20191028191926951.png]: /images/20230531/81e4ed3742ce49dc813f25f3c884129f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230531/2e8587767f5646a9bc0ea37c1f178914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230531/4830cc0a9ec1425fbf228c3d2ae28b21.png
[20191028192247714.png]: /images/20230531/ffe89a27eba842d2bb5eda7b57744c21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230531/7003ce41ee174af881d0b456a1a19344.png
[20191028192340517.png]: /images/20230531/e2f6f857401a4decbf7f8d140e376ccc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230531/4b84a5d7e9da49ae99229fbead1751aa.png
[20191028192458128.png]: /images/20230531/0b3f8c34512b4b589ef9d1160dcea600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]: /images/20230531/3014d058b5a44c0585f54fc8c37a5b7a.png
[20191028192700617.png]: /images/20230531/4afb7ca7f8ef44e297e35aa45293c82a.png
[20191028192752698.png]: /images/20230531/6e060c60cdc8471eb5add13ec77843f9.png
[20191028192820981.png]: /images/20230531/d0a7250dc57340c4a4bb2c7f5a1d3b9a.png
[20191028192901103.png]: /images/20230531/1339d4f4bd3c4e12be42b98c10c1489b.png
[20191028192909580.png]: /images/20230531/4dfe1d9c3d274d388f81b5b63ca60eca.png
[20191028192950873.png]: /images/20230531/877efbe83b67487ea5e22c772f566612.png
[20191028193027863.png]: /images/20230531/562fe3e26f434bdca0de8c75560fecdd.png
[20191028193115906.png]: /images/20230531/2edc155cd15641d888d0895680eb4def.png
[20191028193124727.png]: /images/20230531/d438a03bfdec4efeb0c6228d1a7a8c63.png
[20191028193316793.png]: /images/20230531/acb0533856034c4795cae4c41e29f00a.png
[20191028193341180.png]: /images/20230531/5a7ac612c44d4553a097b694a22e953f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]: /images/20230531/75f1d9672e6c4b76a3269e39af19ade0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 16]: /images/20230531/2c832388793e476e8f74b18de0785382.png