在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,需要通过eventevent.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>

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

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐