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进行数据类型的校验。

<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;}}