深入理解Vue

发表于 | 分类于 ，

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)