v-model的本质是语法糖,它在背后做了两个操作 :
- v-bind绑定一个value值
- v-on指令给当前元素绑定input事件
所以
<input v-model ="inputValue">相当于<input v-bind:value ="inputValue" v-on:input="inputValue = $event.target.value">在自定义组件中使用v-model,有如下操作: - 接收一个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',value)`
它负责监听用户的输入事件以更新数据,并处理一些极端的例子,v-model会忽略所有的表单元素的value,checked,selected特性的初始值,因为它会选择vue实例数据来作为具体的值,所以应该通过在javascript在组件的date选项中声明初始值
代码实例: js.jirengu.com/qakoq/1/edi…
本文引用