前言

使用过一些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属性，并在下面绑定值

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