Vue深入组件：组件 v-model 详解2

v-model 的参数

默认情况下，组件的 v-model 绑定的是 modelValue prop 和 update:modelValue 事件，但可通过“参数”自定义绑定的 prop 名称，实现更灵活的双向绑定（如多值绑定）。

带参数的 v-model 使用

父组件中，通过 v-model:参数名 指定绑定的 prop 名称：

 <!-- 父组件：绑定到子组件的 title prop -->
 <MyComponent v-model:title="bookTitle" />

其中 bookTitle 是父组件的响应式变量，title 是子组件中自定义的 prop 名称。

子组件适配参数

子组件中，给 defineModel() 传递第一个参数（字符串），指定与参数对应的 prop 名称：

 <!-- MyComponent.vue -->
 <script setup>
 // 声明接收 "title" 参数的模型
 const title = defineModel('title')
 </script>
 
 <template>
   <!-- 输入框与 title 绑定，间接与父组件的 bookTitle 同步 --