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