Prop

Prop 属性，用于父子组件之间的传值。当父组件将数据传递给子组件后，我们可以在子组件中通过 props 属性来接收父组件数据。

一、基础语法

1）接收数据

每一个组件都有一个 props 属性用来接收外部传递的数据，数组中的值就是组件需要接收的数据名称。

 export default {
     props: ['name', 'age']
 }

上面代码表示组件要接收 name和 age两条数据。

2）访问 Prop 数据

组件中通过 props接收到的数据，可以直接在 <template> 中进行渲染，也可以在 <script> 通过 this进行访问：

<template>
         <h1>姓名：{{name}}，年龄：{{age}}</h1>
 </template>
 <script>
 export default {
     mounted() {
         console.log(this.name, this.age);
     }
 }
 </script>

注意：Vue 中规定，通过**props**获取到的值，可以访问，但是不能修改。

二、传递数据

当父组件想要给子组件的 props 传递数据时，可以在子组件的标签上通过自定义属性的方式来进行数据传递：

 <Child name="张三" age="18"></Child>

自定义属性的属性名，需要跟子组件内部 props定义的数据名称一致。

传递不同类型的数据

在通过自定义属性给 props传递数据时，我们需要考虑数据的不同类型。例如：字符串、数字、布尔值、数组、对象等。

 <template>
     <Child name="张三" :age="18" :bool="true" :arr="[1, 2, 3]" :obj="{ a: 1 }" :msg="msg"></Child>
 </template>
 <script>
     export default {
         data() {
             return {
                 msg: 'Hello'
             }
         }
     }
 </script>

如果我们希望传递真正的数字、布尔值、数组、对象，或者是 data 中的动态数据，都需要通过 v-bind 将这些属性变成动态属性。
简单来说就是：在给 props 传递数据时，除了普通字符串以外，其他数据全都需要通过**v-bind**指令来进行传递。

三、Prop 的验证

Prop 的验证是指子组件可以对外部传递进来的数据的类型或内容设置验证规则。
例如在子组件组中设置想要接收age数据的值是 Number类型，如果接收到的不是 Number类型，浏览器中就会抛出报错。
如果要设置验证，props属性的值需要切换为对象：

 export default {
     props: {
         age: Number
     }
 }

如果传递的是字符串，浏览器则会抛出以下报错：

其他验证规则

除了定义简单的数据类型验证外，props 还支持其他的一些验证规则：
1）设置多个类型，例如 age属性接收数字和字符串都可以：

 export default {
     props: {
         age: [Number, String]
     }
 }

2）必填属性，例如 age 属性必须传值：

 export default {
     props: {
         age: {
             type: [Number, String],
             required: true
         }
     }
 }

3）默认值，例如 age 属性如果没有传值，就使用默认值 18：

 export default {
     props: {
         age: {
             type: [Number, String],
             default: 18
         }
     }
 }

4）对象和数组类型的默认值，必须通过函数的返回值来设置：

 export default {
     props: {
         friends: {
             type: Array,
             default: () => ['韩梅梅', '李华'], // 数组的默认值
             // 或
             type: Object,
             default: () => ({ name: '韩梅梅' })  // 对象的默认值
         }
     }
 }

5）自定义验证规则，例如 age 接收的值必须在 18 到 25 的范围内：

 export default {
     props: {
         age: {
             type: Number,
             validator: value => value >= 18 && value <= 25
         }
     }
 }

注意：Prop 会在一个组件创建之前进行验证，所以组件的属性 (如data、computed等) 在default或validator函数中是不可用的。