4 组件基础（下）

摘要

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

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

作者：来自ArimaMisaki创作

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事件时，更新父组件的数据。