4 组件基础（下）

摘要

​ 在本文中年我们会了解什么是props，怎么利用props在父组件和子组件之间传递数据；什么是计算属性，还有什么是事件。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取

作者：来自ArimaMisaki创作

[TOC]

4.1 props验证

4.1.1 什么是props验证

说明：如果你想要对外界传入组件的数据进行合法性验证，则原先的props选项使用数组写法没有这个功能，为此，我们改用对象类型的props选项写法。props对象中的键为组件使用者传入数据，值为传入数据的数据类型。

4.1.2 多个可能的类型

说明：对象类型的props选项提供了多种数据验证方案，如

• 基础的类型检查：直接为组件的prop属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据
• 多个可能的类型：如果某个prop属性值得类型不唯一，此时可以通过数组的形式，为其指定多个可能的属性值
• 必填项校验：prop属性可以是一个prop对象，对象中存在required和type，如果开启required为true，则type对应的数据类型必须满足，否则控制台报错
• 属性默认值：prop对象还可以存在default，表示该prop属性默认的值。
• 自定义验证函数：prop对象中可以自定义一个验证函数，从而对prop属性的值进行更加精确的控制。

<template>
  <div>
    <p>数量：{{count}}</p>
    <p>状态：{{state}}</p>
  </div>
</template>

<script>
export default {
    name:'MyCount',
    props:{
        // 必填项校验
        count:{
            type:Number, // 基础类型校验
            required:false,
            default:100 // 默认值
        },
        state:Boolean,
        type:{
            validator(value){
                return ['success','warning','danger'].indexOf(value) !== -1
            }
        }
    }
}
</script>

<template>
    <div>
        <h1>App根组件</h1>
        <hr>
        <MyCount :state="true" type="success"></MyCount>
    </div>
</template>

<script>
import MyCount from './Count.vue';
export default {
    name:'MyApp',
    components:{
        MyCount,
    }
}
</script>

4.2 计算属性

4.2.1 什么是计算属性

说明：我们可以向外暴露computed选项，其可写作对象形式。对象中的每一项都是一个函数，它可以实时监听data中数据的变化，并且return一个计算后的新值。

<template>
    <div>
        <input type="text" v-model.number = "count">
        <p>{{count}}乘以2得：{{plus}}</p>
    </div>
</template>

<script>
export default {
    name:'MyCounter',
    data(){
        return {
            count:1,
        }
    },
    computed:{
        plus(){
            return this.count*2;
        }
    }
}
</script>

<template>
    <div>
        <h1>App根组件</h1>
        <hr>
        <my-counter></my-counter>
    </div>
</template>

<script>
import MyCounter from './MyCounter.vue';
export default {
    name:'MyApp',
    components:{
        MyCounter,
    }
}
</script>

4.2.2 计算属性和方法

疑问：把方法定义在methods节点上不是一样吗，为何非要定义在computed节点上？

解释：相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行计算，因此计算属性的性能更好。

4.3 自定义事件

4.3.1 自定义组件概述

说明：在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

使用步骤：

1. 声明自定义事件：必须事先在emits节点中声明
2. 触发自定义事件：通过this.$emit('自定义事件名称')来触发
3. 监听自定义事件：通过v-on的形式来监听自定义事件

4.3.2 自定义事件传参

说明：如果想要让自定义的事件可以访问到组件的数据，可以在自定义事件从参数列表第二位开始传入参数（第一位是自定义事件名称）。

<template>
  <div>
    <p>Count的值是：{{count}}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
    name:'MyCount',
    emits:['countChange'],
    data(){
        return {
            count:0,
        }
    },
    methods:{
        add(){
            this.count++;
            // 2 触发自定义事件
            this.$emit('countChange',this.count)
        }
    }
}
</script>

<template>
  <div>
    <h1>App根组件</h1>
    <hr>
    <MyCounter @countChange="getCount"></MyCounter>
  </div>
</template>

<script>
import MyCounter from './Counter.vue';
export default {
    name:'MyApp',
    methods:{
        getCount(val){
            alert('触发了'+val+'次事件');
        }
    },
    components:{
        MyCounter,
    }
}
</script>

4.4 组件上的双向绑定

4.4.1 为什么需要在组件上使用v-model

说明：当我们需要维护组件内外数据的同步时，可以在组件上使用v-model指令。

4.4.2 实现组件间的双向绑定

父向子同步：父组件通过v-bind将数据通过props传入子组件

子向父同步：在v-bind指令之前添加v-model指令，并且在子组件中声明emits自定义事件，当触发$emit事件时，更新父组件的数据。