vue3 v-model

在Vue3中，v-model可以用在组件上，当v-model用在组件上时，v-model会被展开为一个自定义的形式。例如，使用v-model绑定一个名为searchText的变量时，展开形式如下：

<CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />

这里的CustomInput是一个自定义组件，它接收一个名为modelValue的prop，并在值发生变化时通过update:modelValue事件来更新searchText的值。这样，我们在父组件中可以使用v-model语法来双向绑定searchText变量。

此外，在Vue3中，我们还可以通过v-model.name来自定义修饰符。自定义的修饰符需要在子组件中用props接收modelModifiers对象，这个对象下面会有自定义属性，值为true。例如，我们可以在子组件中使用以下方式来接收名为a的自定义修饰符：

<template>
  <son-component v-model.a='msg' />
</template>

export default {
  props:['modelValue', 'modelModifiers'],
  emits: ['update:modelValue'],
  created() {
    console.log(this.modelModifiers.a) // 值为true
  }
}

这样，在父组件中使用v-model.a修饰符时，会触发update:modelValue事件，并在子组件中将modelModifiers.a设为true。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [3分钟认识Vue3的v-model](https://blog.csdn.net/weixin_48115935/article/details/124907016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue3: v-model](https://blog.csdn.net/Everglow___/article/details/130222058)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]