Vue3-04_组件基础_下

共计 2166 个字符，预计需要花费 6 分钟才能阅读完成。

props 验证

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

使用数组类型的 props 节点的缺点是无法为每个 prop 指定具体的数据类型。
使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验，

验证方法：

对象类型的 props 节点提供了多种数据验证方案，例如：
① 基础的类型检查
② 多个可能的类型
③ 必填项校验
④ 属性默认值
⑤ 自定义验证函数

export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。// 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {return { message: 'hello'}
      }
    },
    // 自定义类型校验函数
    // 在 3.4+ 中完整的 props 作为第二个参数传入
    propF: {validator(value, props) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个
      // 工厂函数。这会是一个用来作为默认值的函数
      default() {return 'Default function'}
    }
  }
}

计算属性

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

声明计算属性

为什么需要计算属性：

表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。使用计算属性直接返回计算后的结果，使得逻辑主要在函数里处理，模板会更简洁。
① 计算属性必须定义在 computed 节点中
② 计算属性必须是一个 function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用

计算属性与方法

计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。相比之下，方法调用总是会在重渲染发生时再次执行函数。

官方文档补充

https://cn.vuejs.org/guide/essentials/computed

监听事件

什么监听事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，（比如父子组件之间）此时需要用到组件的监听事件。

如何使用监听事件

父组件监听

可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样：

  <BlogPost

  @enlarge-text="postFontSize += 0.1"
 />

子组件声明与调用

声明：
可以通过 emits 选项来声明需要抛出的事件：

<!-- BlogPost.vue -->
<script>
export default {props: ['title'],
  emits: ['enlarge-text']
}
</script>

调用
（1）可以直接通过绑定点击事件触发

   <button @click="$emit('enlarge-text')">Enlarge text</button>

（2）也可以通过函数中调用 this.$emit 触发 

 methods:{test(){this.$emit('enlarge-text')
     }
  }

 <button @click="test">Enlarge text</button>

参数传递

所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：

<MyButton @increase-by="(n) => count += n" />

也可以用一个组件方法来作为事件处理函数, 该方法也会接收到事件所传递的参数：

 <MyButton @increase-by="increaseCount" />

methods: {increaseCount(n) {this.count += n}
}

更多案例

https://cn.vuejs.org/guide/components/events.html#event-arguments

todolist demo

使用 element-plus + vue 实现的 todo list demo 主要逻辑在代码文件中
https://github.com/nebofeng/Vue3_demo/tree/master/02-todolist

---