跳到主要内容

认识

2023年04月22日
柏拉文
越努力，越幸运

一、认识​

v-model 指令既可以作用于普通表单元素，又可以作用于组件。它是一个语法糖，用于实现双向绑定，即数据驱动DOM，DOM 的变化反过来影响数据。

  • 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

  • 可以用 v-model 指令在自定义组件上 <myComp></myComp> 创建双向数据绑定。

注意: 在组件上可以进行多个 v-model 绑定，而在元素上则不可以。

1.1 忽略初始值​

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

1.2 随表单控件类型不同而不同​

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

  • text 和 textarea 元素使用 value property 和 input 事件

  • checkbox 和 radio 使用 checked property 和 change 事件；

  • select 字段将 value 作为 prop 并将 change 作为事件。

二、参数​

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

<MyComponent v-model:title="bookTitle" />

在这个例子中，子组件应声明一个 title prop，并通过触发 update:title 事件更新父组件值:

<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

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

三、修饰符​

3.1 .lazy​

v-model.lazy 取代 input 监听 change 事件

3.2 .number​

v-model.number 输入字符串转为有效的数字

3.3 .trim​

v-model.trim 输入首尾空格过滤

四、语法糖​

4.1 表单​

v-model 用于表单元素时:

<input v-model="searchText" />

Vue.js 内部会转化为:

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

4.2 组件​

v-model 用于表单元素时:

<CustomInput
  v-model="searchText"
/>

Vue.js 内部会转化为:

<!-- 父组件 -->
<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

<!-- 子组件 -->

1. 将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop

2. 当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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