v-model用法

192 阅读1分钟

v-model的本质是语法糖,它在背后做了两个操作 :

  1. v-bind绑定一个value值
  2. v-on指令给当前元素绑定input事件 所以<input v-model ="inputValue"> 相当于<input v-bind:value ="inputValue" v-on:input="inputValue = $event.target.value"> 在自定义组件中使用v-model,有如下操作:
  3. 接收一个value prop 2.触发input事件,并传入新值,代码实例:<my-componet v-model ="inputValue"></my-componet> 相当于<my-componet v-bind:value ="inputValue" v-on:input ="inputValue = argument[0]"></my-componet>

这个时候inputValue接收的值为input事件回调函数的第一个参数,所以在自定义组件中,要实现数据绑定,还需要emit去触发input事件this.emit去触发input事件`this.emit('input',value)`

它负责监听用户的输入事件以更新数据,并处理一些极端的例子,v-model会忽略所有的表单元素的value,checked,selected特性的初始值,因为它会选择vue实例数据来作为具体的值,所以应该通过在javascript在组件的date选项中声明初始值

代码实例: js.jirengu.com/qakoq/1/edi…

本文引用