從最初學習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以及自定義事件代碼量有所減少。