Vue 3更好用的v-model指令

前言

这次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

即：

等价于：

多个v-model指令

等价于：

修饰符

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

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

2. 支持自定义修饰符

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

父组件：

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

子组件：

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