v-model 的實現原理
vue 中 v-model 可以實現數據的雙向綁定，但是為什么這個指令就可以實現數據的雙向綁定呢？
其實 v-model 是 vue 的一個語法糖。即利用 v-model 綁定數據后，既綁定了數據，又添加了一個 input 事件監聽。
實現原理：
- v-bind綁定響應數據；
- 觸發input事件并傳遞數據。
點擊查看代碼
<input v-model="text"></input>
// 等價于：
<input :value="text" @input="text = $event.target.value"></input>
// 組件中使用：
<custom-input :value="text" @input="$event"></custom-input>
// 根據v-model原理模擬：
<input type="text" id="ipt1">
<input type="text" id="ipt2">
<script>
var ipt1=document.getElementById('ipt1');
var ipt2=document.getElementById('ipt2');
ipt1.addEventListener("input",function(){
ipt2.value=ipt1.value;
})
</script>
浙公網安備 33010602011771號