使用v model雙向繫結子元件

2021-10-22 18:35:07 字數 1230 閱讀 9549

在專案中經常會遇到子元件向父元件傳遞值的情況。例如封裝乙個ih-input元件，需要把他的值傳遞給父元件，通常的做法是利用$emit去觸發某一事件，把值作為引數傳遞出去。這種做法是最基本的，但不好的就是在父元件中需要寫乙個方法作為事件的呼叫，用起來覺得繁瑣！還有乙個更乾脆的辦法就是利用v-model，在父元件中宣告乙個變數，直接繫結子元件，無需再去另寫方法接收，如下：
要想實現上述方法，必須先要弄懂v-model的原理。v-model實際上是乙個語法糖：

上面兩者是同乙個意思,可以把上面當作下面的簡寫。h5中，input元素中新增了input事件，當輸入文字時就會觸發。v-model會將content跟預設屬性value繫結，並把它作為input事件的接收物件。當改變content時，就改變了input元素的value屬性，在input元素中直接輸入時，觸發input事件，value傳遞給content，到這裡其實就很簡單了，ih-input元件**：

當ih-input繫結content時，通過props傳遞進來（此時ih-input內部this.value = content）。ih-input內部定義計算屬性text並繫結在input元素上，getter接收了value（this.text = this.value = content），input元素value變成content。當input元素輸入時，value發生改變，修改計算屬性text，觸發set(),回到開頭的$emit,觸發v-model預設的input事件，content = $event.target.value,修改父元件資料。

其他的任意元件都可以通過這樣實現，核心思想都是元件內部利用$emit觸發input事件往外傳遞資料。例如網路請求響應提示，登入成功提示框顯示2秒後隱藏，父元件可以繫結乙個boolean值，預設false，在子元件內最外層利用v-if控制。登入成功，父元件內修改boolean為true，子元件內部created鉤子觸定時器發，2秒後往外傳遞修改為false，隱藏子元件。利用props雖然同樣可以實現，相比之下利用props的話，就兩種情況：1，子元件內部用$emit觸發父元件事件，父元件內部則需多定義乙個方法作為事件的呼叫去修改該boolean值；2，在登入請求成功時修改為true，同時定義定時器，兩秒後再次修改為false。無論哪一種都導致了開始的那個問題--繁雜冗餘，有違元件化思想，自己的事情自己做，而利用v-model只需要在必要時改false為true即可，其他操作均在子元件內部完成。

Vue元件上使用v model雙向繫結

首先要明確它就是個語法糖 v model 相當於 onchange 的語法糖 text value name input name event.target.value 上面這個功能和v model是一致的 你自己也可以用 input監控輸入的結果 就可以找到target下面的value 下面有乙個...

v model資料雙向繫結

常用指令v modeltitle src script head class div type text v model name v model age value 01 01option value 02 02option select div 男type radio value man v m...

v model雙向繫結原理

v model雙向繫結原理 首先要知道input輸入框中有乙個input事件，當使用者輸入時觸發，他在元素值發生改變時立刻觸發 value改變 在中也是一樣的。但是其從下拉框中選值不會觸發。lang en charset utf 8 titletitle head type text value m...