在 Vue.js 中,经常会使用 v-model 实现表单的双向数据绑定功能。
查找了一下相关资料,其实 Vue.js 的官网上有教程有相关的资料。

使用自定义事件的表单输入组件

使用自定义事件的表单输入组件

v-model 其实是一个语法糖,这背后其实做了两个操作
1、v-bind 绑定一个 value 属性
2、v-on 指令给当前元素绑定 input 事件

在原生表单元素中

1
<input v-model='something'>

就相当于

1
<input v-bind:value="something" v-on:input="something = $event.target.value">

当input接收到新的输入,就会触发input事件,将事件目标的value 值赋给绑定的元素

在自定义组件中

1
<my-component v-model='something'></my-componment>

相当于

1
<my-component v-bind:value='something' v-on:input='something = arguments[0]'></my-component>

这时候,something接受的值就是input是事件的回掉函数的第一个参数
所以在自定义的组件当中,要实现数据绑定,还需要使用[$emit]去触发input的事件。

1
this.$emit('input', value)