参考: 官网

说明

至今Vue3的发布已经很久了,久到了甚至Vue 2 已经终止支持且不再维护,在几个月未写vue3代码后,忽然前几周在官网上发现了v-model的官方宏,遂记录例比以往v-model的写法;

vue3.4 版本之后 defineModel() 宏

1.child子组件
<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>parent bound v-model is: {{ model }}</div>
</template>
2.父组件用 v-model 绑定值：
<!-- Parent.vue -->
<Child v-model="count" />

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：

  • 它的 .value 和父组件的 v-model 的值同步；

  • 当它被子组件变更了，会触发父组件绑定的值一起更新。

这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：

<!-- Child1.vue -->
<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

ps: 在写法上简化巨大,通过 defineModel 宏,使我们运用v-model的双向绑定十分的便利,但是使用的同时要注意追踪值的流动,毕竟你改动了props.

3.defineModel 参数 及 TS
const model = defineModel({ 
  required: true, // 是否必填
  default: 0, // 默认值 ps: 设置后父子组件间可能出现参数不一致现象
  type: String, // Number 类型指定 
})

TS中类型指定

const modelValue = defineModel<string>()
// Ref<string | undefined>

// default model with options, required removes possible undefined values
const modelValue = defineModel<string>({ required: true })
// Ref<string>

const [modelValue, modifiers] = defineModel<string, 'trim' | 'uppercase'>()
// Record<'trim' | 'uppercase', true | undefined>
4.多值绑定
<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
<script setup>
const firstName = defineModel('firstName', {
  required: true, // 是否必填
  default: 0, // 默认值 ps: 设置后父子组件间可能出现参数不一致现象
  type: String, // Number 类型指定 
})
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>
5.修饰符

输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写

<MyComponent v-model.capitalize="myText" />

通过像这样解构 defineModel() 的返回值，可以在子组件中访问添加到组件 v-model 的修饰符：

<script setup>
const [model, modifiers] = defineModel()

console.log(modifiers) // { capitalize: true }
</script>

<template>
  <input type="text" v-model="model" />
</template>

为了能够基于修饰符选择性地调节值的读取和写入方式，我们可以给 defineModel() 传入 get 和 set 这两个选项。这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。下面是一个例子，展示了如何利用 set 选项来应用 capitalize (首字母大写) 修饰符：

<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>

带参数的 v-model 修饰符

<UserName
  v-model:first-name.capitalize="first"
  v-model:last-name.uppercase="last"
/>
<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')

console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true}
</script>

vue 3.0 ~ 3.4 版本

1.子组件
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

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

相较于vue2默认为value,vue3改为了modelValue,而相较于defineModel有助于理解其底层机制.

vue 2.2 ~ 2.7 版本

在vue2中,一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

1.child子组件
Vue.component('base-input', {
  props: {
    value: undefined
  },
  template: `
    <input
      :value="value"
      @change="$emit('input', $event.target.value)"
    >
  `
})
2.父组件引用
<base-input v-model="lovingVue"></base-input>

当初在开始使用vue2时,自定义的v-model写法在封装组件时十分便利.

可惜现如今vue2已不维护,故不在做太多介绍.