（16）深入理解 Vue 组件——③ 组件参数校验与非 props 特性 | Vue 基础理论实操组件的参数校验：父组件

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

🔗本阶段对应的“官方文档”阅读

1 组件的参数校验

组件的参数校验：父组件向子组件传递的内容，子组件对所接收的数据做一些约束（规则的改变），这些约束叫做参数的校验。

1.1 父组件向子组件传值

父组件向子组件传递参数，通过“属性”的形式。子组件接收这些数据，用 props ，然后在子组件的 template 中传递该数据，以下代码已经演示了很多遍：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-组件参数校验与非 props 特性</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child content="hello world"></child>
  </div>
  <script>
    Vue.component("child", {
      props: ["content"],
      template: "<div>{{content}}</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>
</html>

1.2 子组件如何进行“值”的约束

改变一下子组件中的 props 传参的规则，即将原本值的数组形式改为对象形式。对象的“键”为所接收的数据名，键值为数据类型（如 String 、Number 、Object）——约束：子组件接收到的数据属性，必须为 xxx 数据类型。

<body>
  <div id="root">
    <child content="hello world"></child> <!-- ❗️注意：若需要传递“数字”，
																					那么写法是 :content="123" 。 -->
  </div>
  <script>
    Vue.component("child", {
      props: {     
        content: String // 🚀约束 content 为字符串。
                         
      },
      template: "<div>{{content}}</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>

<body>
  <div id="root">
    <child content="hello world"></child> <!-- ❗️注意：若需要传递“数字”，
                                          那么写法是 :content="123" 。 -->
  </div>
  <script>
    Vue.component("child", {
      props: {     
        content: Number // 🚀约束 content 类型为数字。
                         
      },
      template: "<div>{{content}}</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>

<body>
  <div id="root">
    <child :content="123"></child> <!-- ❗️注意：若需要传递“数字”，
                                   那么写法是 :content="123" 。 -->
  </div>
  <script>
    Vue.component("child", {
      props: {     
        content: Number // 🚀约束 content 类型为数字。
                         
      },
      template: "<div>{{content}}</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>

1.3 多种数据类型的参数校验

假设子组件要同时接收父组件传过来的多种数据类型，则可以在 props 中做如下表示：

Vue.component("child", {
  props: {    
    content: [ Number, String ] // 🚀将“键值”用“数组”表示！
  },
  template: "<div>{{content}}</div>"
})

1.4 复杂的参数校验

当子组件 props 接收一个名为 content 的属性时，可以添加一些配置参数：

type 表示所传数据的类型；
required: true 表示该属性是必传的；
default: "default" 提醒父组件没有进行相关的“属性”传递；
validator 自定义“校验器”，表示对传入属性的进行更复杂的校验。

<body>
  <div id="root">
    <child content="hello world"></child>
  </div>
  <script>
    Vue.component("child", {
      props: {       
        content: {
          type: String, // 🚀表示类型必须为 String ；
          required: false, // 🚀true 表示属性必传；false 表示可以不传属性；
          default: "default" // 🚀提醒父组件并没有属性传递；
          validator: function(value) { // 🚀自定义校验器，表示还可以对传入属性进行“长度”的校验；
              return (value.length > 5) // 这个逻辑为 true ，“属性”才会被接收！
            }
          }
        },
      template: "<div>{{content}}</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>

2 非 `props` 特性 🆚 `props` 特性

2.1 非 `props` 特性

若子组件未定义 props 来接收父组件通过“属性”传来的值，那么这个属性（如 content ）则为非 props 特性。

该属性会展现在子组件 template 的 dom 标签属性中。

<body>
  <div id="root">
    <child content="hello world"></child> // ❗️content 会展现在 DOM 标签中！
  </div>
  <script>
    Vue.component("child", {
      template: "<div>hello</div>"
    })
    var vm = new Vue({
      el: "#root"
    })
  </script>
</body>

2.2 props 特性

父组件通过“属性”(如 content )向子组件传值时，子组件通过 props 来接收这个数据。这个属性则为 props 特性。 💡“ props 特性”的特点：

该属性不会出现在 dom 上；
父组件通过属性传值后，子组件就会通过 template 中的插值表达式或通过 this.content 去取得该属性中的内容。

<div id="root">
  <child content="hello world"></child>
</div>
<script>
  Vue.component("child", {
    props: {       
      content: {
        type: String, 
      }
    },
    template: "<div>{{content}}</div>"
  })
  var vm = new Vue({
    el: "#root"
  })
</script>

祝好，qdywxs ♥ you！

（16）深入理解 Vue 组件——③ 组件参数校验与非 props 特性 | Vue 基础理论实操