我们之前学习过,可以使用v-model进行数据的双向绑定,
在input输入框内容变化时,我们的数据同时变化,不用我们去手动赋值
v-model这个指令是vue为我们提供的一种语法糖,
下面这种写法和使用v-model是等价的
把数据content绑定到input的value上,然后在input事件发生时,改变content的值
完整的代码
{{ content }}
我们在输入框输入内容时,content的值也变化了,
现在知道了v-model的原理,我们也可以在自定义的组件上使用v-model了
我们在日常开发中,表单的输入框通常会有一个标签label,来提示输入框要输入的内容,
现在我们就来开发一个组件,它包括这个标签和input输入框,并且使用自定义v-model
总结下来几点就是:
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中使用
{{ content }}
效果如下
关于自定义v-model就说这么多了,其实v-model还有更高级的用法,这里就不介绍了,大家先掌握基础用法就行了,平时开发基本也够用了。