我们之前学习过，可以使用v-model进行数据的双向绑定，
在input输入框内容变化时，我们的数据同时变化，不用我们去手动赋值
<input type="text" v-model="content" />
v-model这个指令是vue为我们提供的一种语法糖，
下面这种写法和使用v-model是等价的
<input
type="text"
:value="content"
@input="content = $event.target.value"
/>
把数据content绑定到input的value上，然后在input事件发生时，改变content的值
完整的代码
<template>
<div>
<input
type="text"
:value="content"
@input="content = $event.target.value"
/>
<div>{{ content }}</div>
</div>
</template>
<script>
// 自定义v-model
export default {
name: 'App',
data() {
return {
content: '',
}
},
}
</script>
<style></style>
我们在输入框输入内容时，content的值也变化了，
现在知道了v-model的原理，我们也可以在自定义的组件上使用v-model了
我们在日常开发中，表单的输入框通常会有一个标签label，来提示输入框要输入的内容，
现在我们就来开发一个组件，它包括这个标签和input输入框，并且使用自定义v-model
<template>
<div>
<label>{{ label }}</label>
<input
type="text"
:value="modelValue" // 3.把modelValue的值绑定到input的value上
@input="$emit('update:modelValue', $event.target.value)" // 4.在input事件触发时，发送‘update:modelValue’事件
/>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
default: '',
},
modelValue: { // 1.在props中定义一个modelValue，用于绑定在输入框中
type: String,
default: '',
},
},
emits: ['update:modelValue'], // 2.在emits中声明‘update:moveValue’，这个事件，表明在这个组件中会触发这个事件
}
</script>
<style></style>
总结下来几点就是：
1.在props中定义一个modelValue（默认必须是这个名字），用于绑定在输入框中
2.在emits中声明‘update:moveValue’，这个事件，表明在这个组件中会触发这个事件，这个emits是vue3新增的，之前也说过，这一步和我们今天自定义v-model的主题没关系
3.把modelValue的值绑定到input的value上
4.在input事件触发时，发送‘update:modelValue’事件
这样，我们的自定义组件myInputItem.vue，就可以使用v-model，
在app.vue中使用
<template>
<div>
<myInputItem v-model="content" label="用户名"></myInputItem>
<div>{{ content }}</div>
</div>
</template>
<script>
// 自定义v-model
import myInputItem from './components/myInputItem.vue'
export default {
name: 'App',
components: {
myInputItem,
},
data() {
return {
content: '',
}
},
}
</script>
<style></style>
效果如下
关于自定义v-model就说这么多了，其实v-model还有更高级的用法，这里就不介绍了，大家先掌握基础用法就行了，平时开发基本也够用了。
