element-ui中input組件的探究

簡介：在element中，表單的應用是很是的常見的，可是偶爾你們也會陷入思考，element的表單是怎麼實現的，接下來的幾篇文章中，我會帶着你們去了解這塊東西。

（1）在理解這些東西開始，咱們必須先回顧一下v-model指令。

v-model指令，想必你們基本都清楚的。

可是它僅僅是一個v-bind和oninput的語法糖而已，請看圖

看一下element的組件中的代碼基本都是這樣子的

因此咱們就須要去思考這些東：1：在組件上面使用v-model的話，組件的內部怎麼接收？2：組件的內部怎麼傳值出來？怎麼實現雙向綁定的？

so：咱們來寫一個這樣的組件，暫且不考慮v-model的事情

父級組件定義input-item，代碼以下：

子組件的內容，代碼以下：

要注意的地方就是，子組件中監聽onInput時，用的是this.$emit觸發父級自定義的input事件，實現組件的傳值

如今：能夠進行替換了吧？不知道怎麼替換麼？？文章開篇降到了v-model是v-bind和@input的一個語法糖麼？這個不能忘記。看代碼。

element-ui中form表單的探究源碼地址：gitee.com/theveiwweb/… 因爲表單這塊的話，三個組件之間的傳值，很差用文字敘述，就直接源碼地址放在這裏了

我是新手，記得點贊哪。