组件的v-model的使用
我们都知道,在vue中我们可以通过v-model双向绑定到input表单,作用是能够实现数据的双向绑定,即input的value值和绑定的数据实现互相同步。在vue3中,v-model得到了更进一步的增强,它可以应用在组件中了。那么下面我首先将介绍v-model在正常应用和组件应用中的一些区别和他实际上做了哪些操作
v-model在正常应用中的实际操作
我们都知道,在vue中给input绑定v-model时
<input type="text" v-model="data">
相当于做了这些操作
<input type="text" :value="data" @input="data = $event.target.value">
v-model在组件中应用时的实际操作
那么在组件中使用的v-model,相当于做了哪些操作呢?
<hy-input v-model="message"></hy-input>
等同于
<hy-input :model-value="message" @update:model-value="message = $event"></hy-input>
也就是说,当你通过v-model绑定到一个组件时,实际上它经过了两个步骤:
-
给子组件传递了一个属性model-value,并将这个属性的值绑定为v-model所绑定的数据,这里我们的是将message这个我们在当前组件定义的data绑定到了model-value并传递给子组件
:model-value=“message”
-
注册一个自定义事件updata:model-value,并在触发时将子组件emit时回调的实参传递给message,这里为什么不是 e v e n t . t a r g e t . v a l u e 是 因 为 组 件 的 v − m o d e l 和 普 通 i n p u t 是 不 相 同 的 , 这 里 的 event.target.value是因为组件的v-model和普通input是不相同的,这里的 event.targe