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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

最新评论