v-model多在input的下拉框、单选按钮、复选框中的应用
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
自定义组件使用v-model,应该有以下操作:
1. 接收一个value prop
2. 触发input事件,并传入新值
在原生表单元素中:
1 |
<input v-model="inputValue"> |
相当于
1 |
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value"> |
在自定义组件中
1 |
<my-component v-model="inputValue"></my-component> |
相当于
1 |
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component> </ |