vue的v-model是一個十分強大的指令,它可以自動讓原生表單元件的值自動和你選擇的值繫結,

我們來看一下它的效果: 

輸入框的值和一個數據是繫結的,輸入框的值變化,和他繫結的值也會發生變化

我們在手動輸入 hello的過程中 下面和他繫結的p標籤的值也是實時變化的

如此神奇的效果是如何實現的呢? 還是參照官方文件

官方也說明了,v-model只不過是一個語法糖而已,真正的實現靠的還是

1. v-bind:繫結響應式資料
2. 觸發 input 事件 並傳遞資料 (核心和重點)

現在我們也想設計自己的表單元件,也想通過 v-model暴露元件的值,怎麼做呢?

例如我們要設計一個 自定義貨幣輸入的元件, 通過 v-model暴露元件的值,我們可能使用如下的元件程式碼

1. <currency-input v-model="price"></currency-input>

然後再使用 這個我們自己定義的元件時, 元件內部會暴露出 元件的值到 v-model所繫結的值中去;那它是如何實現的呢?\

要搞明白v-model的實現,需要通過檢視官方的自定義v-model元件示例的部分程式碼來進行說明

我們看上圖中的程式碼,有行  $emit的程式碼,這行程式碼實際上會觸發一個 input事件, 'input'後的引數就是傳遞給

v-model繫結的屬性的值,也就是說 v-model實現自定義的資料繫結的原理是這樣的:

首先,大體的元件結構:

1. <custom-comp v-model="myattr">
2. <input /> ??
3. <select> ??
4. </custom-comp>

也就是自定義的元件內部一般包含原生的表單元件(當然非表單的元件也可以)

然後,給原生控制元件繫結事件,捕捉到原生元件的值,利用 $emit方法,觸發input方法,元件監聽到 input事件然後把值傳入到myattr中.

1. 這裡有個疑問,為什麼是 'input'呢??? 三個字,看文件!
2. 這個就是 vue對 v-model實現的一個規則: 使用了v-model的元件會
3. 自動監聽 input 事件,並把這個input事件所攜帶的值 傳遞給v-model所繫結的屬性!這樣元件內部的值就給到了父元件了

通過以上講解,我們總結一下如何利用v-model實現自定義的表單元件:

監聽原生元件的事件,當獲取到原生元件的值後把 值通過呼叫 $emit('input' ,data) 方法去觸發 input事件