此页内容

约 172 字小于 1 分钟

2022-04-23

vue@3

提问

v-model 的原理

v-model

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

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

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

  • input[type="text"]textarea 元素 使用 value 属性 和 input 事件
  • checkboxradio 元素 使用 check 属性 和 change 事件
  • select 元素 使用 value 属性 和 change 事件
<template>
  <input type="text" v-model="value" />
</template>
<!-- 等价于 -->
<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
}
</script>