首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3.0-props、computed、自定义事件

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

2023-04-22 16:22:24 作者：qq_52822043

这篇文章主要介绍了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;
        }
    }