手记

【学习打卡】第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来直接返回值。

0人推荐
随时随地看视频
慕课网APP