【学习打卡】第8天 Vue3 + TS仿知乎专栏企业级项目

课程名称：Vue3 + TS仿知乎专栏企业级项目
课程章节：第5章
主讲老师：张轩

课程内容

今天学习Form表单的定义实现
表单的验证规则定义使用type和message作为判断一句，每个表单项的Input项会对每个字段逐一检验是否满足规则。
Vue2和Vue3的双向绑定方式有所改变，因为input有些触发改动的方法不一样，比如有的是change，有的是checked，使用onUpdate:modelValue会比较统一。比如
数据更新的方法：

const updateValue = (e: KeyboardEvent) => {
  const targetValue = (e.target as HTMLInputElement).value
  inputRef.val = targetValue
  context.emit('update:modelValue', targetValue)
}

input用ref值绑定，并设置变更的方法来监听

<input
  type="text"
  class="form-control"
  :class="{ 'is-invalid': inputRef.error }"
  :value="inputRef.val"
  @blur="validateInput"
  @input="updateValue"
/>

ValidateInput上一层是Form表单，所以需要用到插槽的方式来嵌入，并且使用具名插槽的方式指定位置，比如替换掉提交按钮。
在之前的课程学到了很方便的provide/inject的数据处理方式，课程寻找的外援mitt也非常方便，API也是简单的on, off, emit，不过在TS类型的定义上容易踩坑。

课程收获

对于检验的每一项，如果一个条件没有满足，可能就直接停止校验了，避免这种bug可以使用map，然后紧接着every来直接返回值。