Vue.js是一個很優(yōu)秀的前端框架，熟練運用可以幫助您快速搭建各種應用。如何理解Vue.js教程中的“使用自定義事件的表單輸入組件”相對于Angular，Vue.js的學習是相對輕松的，但對于初學者，有些地方還是需要花費一定時間來理解的。例如，在官方教程的“組件-使用自定義事件的表單輸入組件”一節(jié)有這樣一個例子：
在理解這一節(jié)的時候，首先要搞清楚兩個基本概念：
（1）表單輸入控件：也就是我們平時HTML表單當中的、之類。
（2）表單輸入組件：我們自己定義的一個組件，這個例子當中的，它對“表單輸入控件”進行了封裝，并增強了其中的功能，例如這里可以實現(xiàn)對數(shù)據(jù)的校驗。
在Vue當中，表單輸入控件也不再是簡單的控件，它可以理解成是一種經(jīng)過Vue特別處理的“底層組件”。
接下來我們按照由外而內(nèi)的方式對這段代碼進行拆解，最關(guān)鍵的是要弄清楚這里的一堆”value“和“input”。
1、首先我們看到，這個Vue實例中有一個price屬性，它的初始值為空字符串。我們可以把這個Vue實例看作是一個父親組件。
2、在我們在自定義組件（子組件）當中，我們使用v-model將其跟父親組件中的price屬性進行了關(guān)聯(lián)。
由于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的主要作用是讓父親組件可以監(jiān)聽到子組件發(fā)出的事件。這段代碼的意思是，當這個子組件產(chǎn)生input事件的時候，父親組件要將自己的price屬性的值設置成子組件傳遞過來的第一個參數(shù)。也就是這里：
同樣，這里的v-on:input也可以改成如“v-on:childInput”之類的。但是，由于我們使用了v-model這個語法糖，所以在組件定義代碼的時候我們只能用“input”這個事件名稱，哪怕你不想用也要用。
3、最后來看自定義組件中所包含的input控件
我們可以將input控件（原生控件）理解成一個最底層的“組件”，所謂最底層，也就是它無法再包含其他的組件。
而對于這些底層控件，Vue自身為我們實現(xiàn)了如何與上層組件進行交互的邏輯。所以，這里的v-bind:value以及v-on:input其實都是Vue為我們實現(xiàn)的，如果我們不需要進行校驗的話，這段代碼其實可以用語法糖的形式簡寫成：
<input v-model="value">（注意這里的value對應的是props中的那個value）
只不過，由于我們要進行校驗，所以就不能使用語法糖的形式了，而需要使用其原始的形式。
這里的交互邏輯是這樣的：
①當我們在input這個控件中輸入字符的時候，會自動觸發(fā)一個名為input的事件（這是一種原生事件）。
②如果我們要關(guān)注這個事件，那么需要在自定義控件中定義一個方法來接收這個事件，也就是updateValue()方法，這個方法接收用戶的原始輸入數(shù)據(jù)$event.target.value來作為參數(shù)。
③在updateValue()方法中，我們對用戶的輸入進行基本的校驗，如果用戶輸入的數(shù)值不符合要求，那么我們會將input控件的值設置成我們的數(shù)值，如果符合要求，那就不用管。如何理解Vue.js教程中的“使用自定義事件的表單輸入組件”
④在updateValue()方法的最后，將這個值轉(zhuǎn)換成Number類型，并通過emit傳遞給父親組件（Vue實例的price）。
⑤父親組件的price將被更新，子組件中的props:['value']中的value由于綁定了price，因此也會被更新成price的數(shù)值。
⑥最終，中更新后的value將被傳入控件當中（因為input綁定了"value"）。
這里還有一個細節(jié)，由于我們最終的數(shù)值是price，它經(jīng)過updateValue()處理后，通過自下而上傳遞到父親控件，然后再自上而下的方式傳遞到最底層的input控件，那么我們在上述的第③點中通過this.$refs.input.value=formattedValue的方式來顯式設置input的值是否有必要？這個問題留給大家思考??！
