Vue3笔记_组件的v-model

组件的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绑定到一个组件时，实际上它经过了两个步骤：

1. 给子组件传递了一个属性model-value，并将这个属性的值绑定为v-model所绑定的数据，这里我们的是将message这个我们在当前组件定义的data绑定到了model-value并传递给子组件

   :model-value=“message”

2. 注册一个自定义事件updata:model-value，并在触发时将子组件emit时回调的实参传递给message，这里为什么不是$event.targe$