• v-model可以在组件上使用以实现双向绑定。

Vue 3.4之前使用方式

1、props & emit

• 父组件

<template><Child v-model="name"v-model:first-name="firstN"v-model:last-name="last"/>
</template>

• 子组件

<script setup>
const props = defineProps({modelValue: {type: String,default: ""},firstName: {type: String,default: ""},lastName: {type: String,default: ""},
})const emit = defineEmits('update:modelValue', 'update:firstName', 'update:lastName')const onUpdateModelValue = (value) => {emit('update:modelValue', value)
}const onUpdateFirstName = (value) => {emit('update:firstName', value)
}// ...
</script>

2、VueUse 中的 useVModels

• 首先需要下载VueUse库
• 更多使用方式，移步 useVModels

npm i @vueuse/core

<script setup>
import { useVModels } from '@vueuse/core'const props = defineProps({modelValue: {type: String,default: ""},firstName: {type: String,default: ""},lastName: {type: String,default: ""},
})const emit = defineEmits('update:modelValue', 'update:firstName', 'update:lastName')const { modelValue, firstName, lastName } = useVModels(props, emit)
// ...
</script>

Vue 3.4 之后使用方式

• 从 Vue 3.4 开始，官方推荐的实现方式是使用 defineModel() 宏：
• 更多使用方式，移步 defineModel

<script setup>
const modelValue = defineModel({ type: String, default: "" })
const firstName= defineModel('fields', { type: String, default: "" })
const lastName= defineModel('list', { type: String, default: "" })
</script>