使用自定义事件的表单输入组件

使用自定义事件的表单输入组件

自定义组件可以用来创建自定义的表单输入组件，使用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>

解释：

1. 双向数据绑定就是 更改输入框中的数据，something同步改变。因此需要：a、绑定value属性 b、触发oninput事件
2. oninput事件是当元素值发生改变时立即触发。所以v-on:input=”something = $event.target.value”就是在实时的更新something的值
3. $event.target.value 获取到的是当前目标的value值，即当前input框的value值
4. arguments[0]获取的是所传入参数的第一个参数。oninput事件的回调函数里的第一个参数就是当前input的value

其他知识点的补充：

1. oninput与onchange的区别：

   oninput是当输入框中的数据改变时立即触发
   onchange是当失去焦点的时候触发

2. v-modle与v-bind的区别：
   1) v-model 是用在表单控件上的，实现的是双向数据绑定
   2) v-bind 用来绑定属性和数据。 动态的给这些属性添加值（在默认的情况下，标签自带的属性值是固定的）