vue3以及vue2自定义封装v-model

在v2的时候，默认的prop字段是value，emit触发的名称是input，对于其他非输入框的例如checkbox的prop应该是checked，emit触发的名称应该是change。这些prop跟emit对应的用于原生组件使用。v3则由默认的value改成modelValue，并且emit触发的名称由input改成update。并且允许加上修饰符(绑定自己定义的属性名称)，例如:emit(‘update:values’, e)；因此v3可以绑定多个属性为双向绑定。

v2通过 原生组件@input事件得到的是组件事件对象$event，需要通过$event.target.value来获取值，而v3则是直接得到组件绑定值。

下面是通过v3,ts实现v-model双向绑定测试代码

<script setup lang="ts">
interface Props {
  values?: string
}
const props = withDefaults(defineProps<Props>(), {
  values: () => '',
});
type Emit = {
  (e: 'update:values', value: string): void,
}
const emit = defineEmits<Emit>();
const inputEvent = (e) => {
  emit('update:values', e);
};
const inputEvent2 = (e) => {
/*
如果是v2写法应该是emit('input', e.target.value) //未测试，而父组件v-model后面就不需要属性修饰符了。
**/
  emit('update:values', e.target.value);
};
/**
 * 父组件使用
 * <ModelTest v-model:values="ipCount"/>
 * ipCount是父组件传给子组件的对象变量。
 * v3通过 :model-value方式绑定传入的prop值，并通过相关事件的emit往父组件传回值。
 * v2通过 :value方式绑定输入的prop值，并通过相关事件的emit往父组件传回绑定的$event.target.value值
 */
</script>
<template>
  <ElInput :model-value="props.values" @input="inputEvent" />
  <input :value="props.values" @input="inputEvent2" >
</template>

目前测试代码中两个输入框可同时实现双向数据绑定。但总感觉还有地方没理解到位。