Vue v-model原理解析


  從最初學習Vue就知道v-model可以實現雙數據綁定,但它能實現綁定的原理到底是什么呢?通過查看官方文檔和各種博客資料,以下是我的理解。

  根據官方文檔介紹,v-model本質上就是語法糖,即利用v-model綁定數據后,其實就是既綁定了數據,又添加了一個input事件監聽,如下:

 

當在input元素中使用v-model實現雙數據綁定,其實就是在輸入的時候觸發元素的input事件,通過這個語法糖,也能夠實現父子組件數據的雙向綁定,代碼如下:

父組件

子組件

通過v-bind把父組件的數據綁定到了子組件的props屬性中,而在props上默認用value取值,然后通過$emit觸發事件input,因為v-model綁定的事件是input,故在子組件上觸發了父組件的input事件,通過觸發事件來進行傳值,實現了父子組件數據的雙向綁定,相對於直接使用v-bind以及自定義事件代碼量有所減少。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM