vue3 自定义组件v-model

在Vue 3中，自定义组件的v-model默认绑定的是`modelValue`而不是`value`，接收的方法由`input`改为`@update:modelValue`。例如，在一个父组件中，我们可以这样使用自定义组件：

<template>
  <child v-model="message" />
</template>

然后在子组件中，我们可以这样定义props和setup函数：

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: String
})

const emits = defineEmits(['update:modelValue'])

const onInput = (e) => {
  emits['update:modelValue'](e.target.value)
}

</script>
<template>
  <input type="text" :value="modelValue" @input="onInput">
</template>

通过这种方式，我们可以像使用原生的`v-model`一样在父组件中使用自定义组件，并且可以正确地双向绑定`modelValue`的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3 自定义组件v-model](https://blog.csdn.net/weixin_46694059/article/details/128935137)[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/qq_42075072/article/details/123800801)[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 ]