父子组件双向绑定
v-model 语法糖实现
vue中我们在input中可以直接使用v-model来完成双向绑定,这个时候 v-model 通常会帮我们完成两件事:
- v-bind:value的数据绑定
- @input的事件监听
如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?
当我们在组件上使用的时候,等价于如下的操作:
<myInput v-model="message" />
等价于
<myInput :model-value="message" @update:model-value="message = $event" />