v-model只是一個語法糖，等于:value+@input，真正的實現靠的還是： v-bind:綁定響應式數據，觸發 input 事件并傳遞數據 (核心和重點)

1

其實和下面一樣的

<input :value=“something” @input=“something = $event.target.value”>

1

因此，對于一個帶有 v-model 的輸入框組件，它應該：接收一個 value prop，觸發 input 事件，并傳入新值

自定義myInput組件

在頁面使用

{{name}} {{othername}}

methods:{
}
}

效果
總結：
自定義的組件內部一般包含原生的表單組件(當然非表單的組件也可以)，然后給原生控件綁定事件,捕捉到原生組件的值,利用 $emit方法,觸發input方法,組件監聽到 input事件然后把值傳入

v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。

總結

以上是生活随笔為你收集整理的工作265:v-model实现原理 自定义组件使用v-model的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。