v-model 的参数
组件上的 v-model 也可以接受一个参数：
<MyComponent v-model:title="bookTitle" />
在子组件中，我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数：
<!-- MyComponent.vue --> <script setup> const title = defineModel('title') </script> <template> <input type="text" v-model="title" /> </template>
如果需要额外的 prop 选项，应该在 model 名称之后传递：
const title = defineModel('title', { required: true })
多个 v-model 绑定
利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。
组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：
<UserName v-model:first-name="first" v-model:last-name="last" /> <script setup> const firstName = defineModel('firstName') const lastName = defineModel('lastName') </script> <template> <input type="text" v-model="firstName" /> <input type="text" v-model="lastName" /> </template>
处理 v-model 修饰符
在学习输入绑定时，我们知道了 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 修饰符
这里是另一个例子，展示了如何在使用多个不同参数的 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>
