v-model
v-model 其实是一个语法糖,这背后其实做了两个操作:
- v-bind 绑定一个 value 属性
- 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)