前言

这次Vue 3的v-model解决了从前Vue 2的v-model的很多痛点，可以说是一次很舒服的升级，一起看看。

官方文档：https://v3.cn.vuejs.org/guide/component-custom-events.html#v-model-参数

官方升级指南：https://v3.cn.vuejs.org/guide/migration/v-model.html

简单用法

用于自定义组件时，v-model的prop和事件默认名称已更改：

prop：value -> modelValue
event：input -> update:modelValue

即：

<xxComponent v-model="varA" />

等价于：

<xxComponent :modelValue="varA" @update:modealValue="varA = $event" />

多个v-model指令

<xxComponent v-model.varA="varA" v-model.varB="varB" />

等价于：

<xxComponent :varA="varA" @update:varA="varA = $event" :varB="varB" @update:varB="varB = $event" />

修饰符

1. 支持Vue 2的所有修饰符：

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

2. 支持自定义修饰符

现在的例子是：自定义prop名+自定义修饰符：

父组件：

核心就一句：v-model:content.camelCase="word"，其中content是子组件要求的prop名，要听子组件的规定。word是父组件的变量名，叫什么名无所谓。camelCase也是子组件要求的修饰符名，要听子组件的规定。

<template>
  <div>
    <zi v-model:content.camelCase="word" />
  </div>
</template>

<script>
import zi from "./zi.vue";
export default {
  components: {
    zi,
  },
  data() {
    return {
      word: "",
    };
  },
};
</script>

子组件：

子组件较复杂，而且我特意用组合式API来演示。

<template>不说了。

defineProps函数的写法就是这样，先写content，然后写contentModifiers，这是Vue的规定，必须是prop名跟Modifiers字串。contentModifiers的值必须是这样一个函数。

useContext和getCurrentInstance在开发中会经常用到。useContext()能拿到几个变量，包括props变量。getCurrentInstance()能拿到组件实例this，用来执行.emit()。

content必须是计算变量，否则传入prop新值之后，子组件无法感知。

emitCamelCase方法里，if语句是为了确认修饰符正确。

instance.emit语句没什么可说的。

<template>
  <div>
    <input type="text" :value="content" @input="emitCamelCase" />
  </div>
</template>

<script setup>
import { useContext, getCurrentInstance, defineProps, computed } from "vue";
defineProps({
  content: String,
  contentModifiers: {
    default: () => ({}),
  },
});
const ctx = useContext();
const instance = getCurrentInstance();
let content = computed(() => ctx.props.content);
function emitCamelCase(e) {
  if (ctx.props.contentModifiers.camelCase) {
    instance.emit(
      "update:content",
      e.target.value.replace(/_./g, (a) => {
        return a[1].toUpperCase();
      })
    );
  }
}
</script>

如果有多个v-model，就多来一份代码就可以了。