鹏展博

外观

v-model

约 169 字

vue@3

提问

v-model 的原理

v-model

v-model 本质是一个语法糖，可以看成是 input + value 的语法糖。

可以通过 model属性的 prop 和 event 属性来进行自定义。

默认的 v-model ，会根据标签的不同生成不同的事件和和属性。

  • input[type="text"] 和 textarea 元素 使用 value 属性 和 input 事件
  • checkbox 和 radio 元素 使用 check 属性 和 change 事件
  • select 元素 使用 value 属性 和 change 事件
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
}
</script>

<!-- 等价于 -->
<template>
  <input v-model="value" type="text">
</template>

<template>
  <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>