vue3.0-props、computed、自定义事件

目录

1. props验证

1）props验证

2）对象类型的props节点

3）props验证

①基础的类型检查

②多个可能的类型

③必填项校验

④属性默认值

⑤自定义验证函数

2. 计算属性

1）计算属性

2）声明计算属性

3）计算属性的使用注意点

4）计算属性和方法

3. 自定义事件

1）自定义事件

2）自定义事件的3个使用步骤

①声明自定义事件

②触发自定义事件

③监听自定义事件

3）自定义事件传参

4. 组件上的v-model

1）在组件上使用v-model

2）在组件上使用v-model的步骤

---

1. props验证

1）props验证

在封装组件时对外界传递过来的props数据进行合法性的校验，从而防止数据不合法的问题。

使用数组类型的props节点的缺点：无法为每个prop指定具体的数据类型。

 

2）对象类型的props节点

使用对象类型的props节点，可以对每个prop进行数据类型的校验。

3）props验证

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

1. 基础的类型检查
2. 多个可能的类型
3. 必填项校验
4. 属性默认值
5. 自定义验证函数

①基础的类型检查

可以直接为数组的prop属性制定基础的校验类型，从而防止组建的使用者为其绑定错误类型。

 

②多个可能的类型

如果某个prop属性值的类型不一致，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：

 

③必填项校验

如果组建的某个prop属性是必填项，必须让组建的使用者为其传递属性的值，此时，可以通过如下的方式将其设置为必填项：

④属性默认值

在封装组件时，可以为某个prop属性指定默认值。

 

⑤自定义验证函数

在封装组件时，可以为prop属性指定自定义的验证函数，从而对prop属性的值进行更加精确的控制。

 

2. 计算属性

1）计算属性

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

2）声明计算属性

计算属性需要以function函数的形式声明到组件的computed选项中。

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

3）计算属性的使用注意点

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

4）计算属性和方法

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

  
数量:{{ count }}乘以2的值为:{{ plus() }}
  
数量:{{ count }}乘以2的值为:{{ plus() }}

  methods: {
        plus() {
            console.log('方法被执行了');
            return this.count*2;
        }
    }

   
数量:{{ count }}乘以2的值为:{{ plus }}
  
   
数量:{{ count }}乘以2的值为:{{ plus }}
 

  computed: {
        plus() {
            // 计算属性会缓存计算的结果
            console.log('计算属性被执行了');
            return this.count*2;
        }
    }

 

3. 自定义事件

1）自定义事件

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

 

2）自定义事件的3个使用步骤

在封装组件时：

1. 声明自定义事件
2. 触发自定义事件

在使用组件时：

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的步骤