Vue.js是一个很优秀的前端框架，熟练运用可以帮助您快速搭建各种应用。如何理解Vue.js教程中的“使用自定义事件的表单输入组件”相对于Angular，Vue.js的学习是相对轻松的，但对于初学者，有些地方还是需要花费一定时间来理解的。例如，在官方教程的“组件-使用自定义事件的表单输入组件”一节有这样一个例子：

在理解这一节的时候，首先要搞清楚两个基本概念：

（1）表单输入控件：也就是我们平时HTML表单当中的、之类。

（2）表单输入组件：我们自己定义的一个组件，这个例子当中的，它对“表单输入控件”进行了封装，并增强了其中的功能，例如这里可以实现对数据的校验。

在Vue当中，表单输入控件也不再是简单的控件，它可以理解成是一种经过Vue特别处理的“底层组件”。

接下来我们按照由外而内的方式对这段代码进行拆解，最关键的是要弄清楚这里的一堆”value“和“input”。

1、首先我们看到，这个Vue实例中有一个price属性，它的初始值为空字符串。我们可以把这个Vue实例看作是一个父亲组件。

2、在我们在自定义组件（子组件）当中，我们使用v-model将其跟父亲组件中的price属性进行了关联。

由于v-model本身只是一个“语法糖”（所谓的语法糖，就是一种偷懒的写法，可以省去重复敲打相同代码的麻烦）。这一段代码如果不用v-model来表示，展开来应该是这样子的：

这里的v-bind:value中的value，其实就是对应组件定义中props:['value']当中的value，通过这个prop就可以接收来父亲组件传递过来的值（也就是price的值）。

接收这个值有什么用呢？——用来设置最终的input控件的值。

那为什么props当中非要用“value”这个名字呢？太容易让人混淆了，我改成“childValue”可以吗？如果你不使用语法糖（v-model）的写法，其实是可以的。

只需要改一下：

然后组件定义代码改成：

但是由于我们使用了v-model这种写法，所以在组件定义代码中就只能乖乖用value这个名字，否则Vue无法对v-model进行顺利拆解。

那么，v-on:input="price=arguments[0]"又该如何理解呢？这里的arguments[0]是什么东西？

我们知道，v-on的主要作用是让父亲组件可以监听到子组件发出的事件。这段代码的意思是，当这个子组件产生input事件的时候，父亲组件要将自己的price属性的值设置成子组件传递过来的第一个参数。也就是这里：

同样，这里的v-on:input也可以改成如“v-on:childInput”之类的。但是，由于我们使用了v-model这个语法糖，所以在组件定义代码的时候我们只能用“input”这个事件名称，哪怕你不想用也要用。

3、最后来看自定义组件中所包含的input控件

我们可以将input控件（原生控件）理解成一个最底层的“组件”，所谓最底层，也就是它无法再包含其他的组件。

而对于这些底层控件，Vue自身为我们实现了如何与上层组件进行交互的逻辑。所以，这里的v-bind:value以及v-on:input其实都是Vue为我们实现的，如果我们不需要进行校验的话，这段代码其实可以用语法糖的形式简写成：

<input v-model="value">（注意这里的value对应的是props中的那个value）

只不过，由于我们要进行校验，所以就不能使用语法糖的形式了，而需要使用其原始的形式。

这里的交互逻辑是这样的：

①当我们在input这个控件中输入字符的时候，会自动触发一个名为input的事件（这是一种原生事件）。

②如果我们要关注这个事件，那么需要在自定义控件中定义一个方法来接收这个事件，也就是updateValue()方法，这个方法接收用户的原始输入数据$event.target.value来作为参数。

③在updateValue()方法中，我们对用户的输入进行基本的校验，如果用户输入的数值不符合要求，那么我们会将input控件的值设置成我们的数值，如果符合要求，那就不用管。如何理解Vue.js教程中的“使用自定义事件的表单输入组件”

④在updateValue()方法的最后，将这个值转换成Number类型，并通过emit传递给父亲组件（Vue实例的price）。

⑤父亲组件的price将被更新，子组件中的props:['value']中的value由于绑定了price，因此也会被更新成price的数值。

⑥最终，中更新后的value将被传入控件当中（因为input绑定了"value"）。

这里还有一个细节，由于我们最终的数值是price，它经过updateValue()处理后，通过自下而上传递到父亲控件，然后再自上而下的方式传递到最底层的input控件，那么我们在上述的第③点中通过this.$refs.input.value=formattedValue的方式来显式设置input的值是否有必要？这个问题留给大家思考！！