两步教你用Vue3+TS实现input组件的v-model属性

---

前言

使用过一些ui框架的同学应该都知道input里面的值有一个绑定的v-model属性，这篇文章教大家如何给自己定义的input组件写一个v-model的绑定属性

第一步

创建名为modelValue的属性：

props: {
    
    
    modelValue: String
  },

第二步

在更新值的时候要发送一个名为update:modelValue的事件

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

详解：

• KeyboardEvent事件对象用来监听键盘的输入
• 拿到当前 input 里面的值 targetValue
• 将 inputRef.val 的值更新为 targetValue
• 最后在 context.emit 中写入 update:modelValue事件

注意在使用context.emit之前要在setup中添加第二个参数context

setup(props, context) {
    
    
    const inputRef = reactive({
    
    
      val: props.modelValue || '',
      error: false,
      message: ''
    })
    const updateValue = (e: KeyboardEvent) => {
    
    
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }
}

---

效果

组件写完之后直接在app.vue里面使用就可以了
导入ref ：

import {
    
     defineComponent, reactive, ref } from 'vue'

然后在setup（）中定义

const emailVal = ref('viking')

在输入框添加v-model属性，并在下面绑定值

输入框输入数字，下面内容也能显示对应的值