1. props验证
1）props验证
在封装组件时对外界传递过来的props数据进行合法性的校验，从而防止数据不合法的问题。
使用数组类型的props节点的缺点：无法为每个prop指定具体的数据类型。
2）对象类型的props节点
使用对象类型的props节点，可以对每个prop进行数据类型的校验。
<template>
<h1>App</h1>
<my-count :count="count" :state="state"></my-count>
</template>
<script>
import MyCount from './Count.vue'
export default {
name: 'MyApp',
data() {
return {
count: 1,
state: true
}
},
components: {
MyCount
}
}
</script>3）props验证
对象类型的props节点提供了多种数据验证方案，例如：
- 基础的类型检查
- 多个可能的类型
- 必填项校验
- 属性默认值
- 自定义验证函数
①基础的类型检查
可以直接为数组的prop属性制定基础的校验类型，从而防止组建的使用者为其绑定错误类型。
②多个可能的类型
如果某个prop属性值的类型不一致，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：
③必填项校验
如果组建的某个prop属性是必填项，必须让组建的使用者为其传递属性的值，此时，可以通过如下的方式将其设置为必填项：
④属性默认值
在封装组件时，可以为某个prop属性指定默认值。
⑤自定义验证函数
在封装组件时，可以为prop属性指定自定义的验证函数，从而对prop属性的值进行更加精确的控制。
2. 计算属性
1）计算属性
计算属性本质上就是一个function函数，它可以实时监听data中数据的变化，并return一个计算后的新值，供组件渲染DOM时使用。
2）声明计算属性
计算属性需要以function函数的形式声明到组件的computed选项中。
计算属性侧重于得到一个计算的结果，因此计算属性中必须有return返回值。
3）计算属性的使用注意点
- 计算属性必须定义在computed节点中
- 计算属性必须是一个function函数
- 计算属性必须有返回值
- 计算属性必须当做普通属性使用
4）计算属性和方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算，因此相对来说计算属性的性能更好。
<p>数量:{{ count }}乘以2的值为:{{ plus() }}</p>
<p>数量:{{ count }}乘以2的值为:{{ plus() }}</p>
methods: {
plus() {
console.log('方法被执行了');
return this.count*2;
}
}
<p>数量:{{ count }}乘以2的值为:{{ plus }}</p>
<p>数量:{{ count }}乘以2的值为:{{ plus }}</p>
computed: {
plus() {
// 计算属性会缓存计算的结果
console.log('计算属性被执行了');
return this.count*2;
}
} 
3. 自定义事件
1）自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
2）自定义事件的3个使用步骤
在封装组件时：
- 声明自定义事件
- 触发自定义事件
在使用组件时：
1.监听自定义事件
①声明自定义事件
开发者为自定义组件封装的自定义事件，必须是现在emits节点中声明。
②触发自定义事件
在emits节点下声明的自定义事件，可以通过this.$emit('自定义事件的名称')方法进行触发。
③监听自定义事件
在使用自定义的组件时，可以通过v-on的形式监听自定义事件。
3）自定义事件传参
在调用this.$emit()方法触发自定义事件时，可以通过第2个参数为自定义事件传参。
4. 组件上的v-model
1）在组件上使用v-model
v-model是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用v-model指令。
- 外界数据的变化会自动同步到counter组件中
- counter组件中数据的变化，也会自动同步到外界
2）在组件上使用v-model的步骤
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
