vue3的组件v-model（defineModel()宏）

这里展示的是vue3.4版本之前的如何在组件上使用以实现双向绑定 

<template><p>我是子组件</p><input :value="props.modelValue" @input="handelInput"/>
</template><script lang="ts" setup>const props = defineProps({modelValue: {default: '',type: String,}})const emits = defineEmits(['update:modelValue']);cosnt handelInput = (e)=>{emits('update:modelValue', e.target.value);
}
</script>

<template>
<p>我是父组件</p>
<Child v-model="msg"></template><script lang="ts" setup>const msg = ref('v-model调试')
</script>

 v-model 的参数

在 v-model中学到的指定参数，我们可以在单个组件实例上创建多个 v-model 双向绑定。

<template><p>我是子组件</p><input :value="props.msg" @input="handelInput"/><input :value="props.msg2" @input="handelInput2"/
</template><script lang="ts" setup>const props = defineProps({msg: {default: '',type: String,},msg2: {default: '',type: String,},})const emits = defineEmits(['update:msg'，'update:msg2']);cosnt handelInput = (e)=>{emits('update:msg', e.target.value);}
cosnt handelInput2 = (e)=>{emits('update:msg2', e.target.value);}
</script>

<template>
<p>我是父组件</p>
<Child v-model:msg="msg" v-model:msg2="text"></template><script lang="ts" setup>const msg = ref('v-model调试')const text = ref('v-model多个参数调试')
</script>

---

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：

<!-- Child.vue -->
<template><p>我是子组件</p><div>展示父组件传来的双向绑定值: {{ model }}</div><button @click="update">Increment</button>
</template><script setup>
const model = defineModel()const update =()=>{model.value++
}
</script>

<!-- Parent.vue -->
<template><p>我是父组件</p><Child v-model="countModel" />
</template>
<script lang="ts" setup>const countModel = ref(0)
</script>

defineModel() 返回的值是一个 ref(所以使用的时候要.value)。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：

上面还讲到带参的v-model，那么defineModel如何带参呢：

<!-- MyComponent.vue -->
<template><p>我是子组件</p><input type="text" v-model="title" /><input type="text" v-model="content" />
</template><script setup>
const title = defineModel('title')
const content = defineModel('content')
</script>

<template>
<p>我是父组件</p>
<MyComponent v-model:title="bookTitle"  v-model:content="bookContent"/>
</template>
<script lang="ts" setup>const  bookTitle = ref('bookTitle')const  bookContent = ref('bookContent')
</script>

参考文档：组件 v-model | Vue.js