vue v-model 雙向綁定原理 以及語法糖實際是什么


v-model 原理: 

  從接觸Vue我們就知道 v-model是實現數據雙向綁定的 那他能實現綁定的原理到底是啥?

  其實v-model本質上就是語法糖 在使用 v-model 后既綁定了數據 有添加了一個@input事件監聽

  <input v-model='search' />

  等價於

  <input :bind='search' @input='search = $event.target.value'>

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

  父組件:

  

 

 

   子組件:

  

 

 

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

 

大佬解釋:https://www.xiaoboy.com/topic/vue-parent-child-communication-by-v-model.html

 


免責聲明!

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



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