使用自定义事件的表单输入组件
自定义组件可以用来创建自定义的表单输入组件,使用v-model来进行数据双向绑定。
先上官网内容,然后做解释:
<input v-model="something">
相当于是以下示例的语法糖:
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
在组件中使用时,相当于下面的简写:
<custom-input
v-bind:value="something"
v-on:input="something = arguments[0]">
</custom-input>
解释:
- 双向数据绑定就是 更改输入框中的数据,something同步改变。因此需要:a、绑定value属性 b、触发oninput事件
- oninput事件是当元素值发生改变时立即触发。所以v-on:input=”something = $event.target.value”就是在实时的更新something的值
- $event.target.value 获取到的是当前目标的value值,即当前input框的value值
- arguments[0]获取的是所传入参数的第一个参数。oninput事件的回调函数里的第一个参数就是当前input的value
其他知识点的补充:
oninput与onchange的区别:
oninput是当输入框中的数据改变时立即触发
onchange是当失去焦点的时候触发v-modle与v-bind的区别:
1) v-model 是用在表单控件上的,实现的是双向数据绑定
2) v-bind 用来绑定属性和数据。 动态的给这些属性添加值(在默认的情况下,标签自带的属性值是固定的)