Vue组件进阶

Vue组件进阶

props验证

对外界传递进来的props数据进行合法性的校验，防止数据不合法

props:{
    count:Number,
    state:Boolean
}

对象类型的 props 节点提供了多种数据验证方案，例如：

1. 基础的类型检查

2. 多个可能的类型

3. 必填项校验

4. 属性默认值

5. 自定义验证函数

计算属性

计算属性本质上就是一个function函数，它可以实时监听data中数据的变化，并return一个计算后的新值供组件渲染DOM时使用

声明

计算属性需要以function函数的形式声明到组件的computed选项中，实例代码如下：

注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！

1. 计算属性必须定义在 computed 节点中
2. 计算属性必须是一个 function 函数
3. 计算属性必须有返回值
4. 计算属性必须当做普通属性使用

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

自定义事件

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

步骤

在封装组件时：

1. 声明自定义事件

2. 触发自定义事件

   在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发，示例代码如下：

在使用组件时：

1. 监听自定义事件

   
   methods:{
   	getCount(){
   		console.log('get it')
   }
   }
   

自定义事件传参

在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参，示例代码如下：

组件上的v-model

v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。

父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

② 子组件中，通过 props 接收父组件传递过来的数据

① 在 v-bind: 指令之前添加 v-model 指令

② 在子组件中声明 emits 自定义事件，格式为 update:xxx

③ 调用 $emit() 触发自定义事件，更新父组件中的数据