你知道v-model的原理吗？说说看

Answer 1

v-model只不过是一个语法糖而已,真正的实现靠的还是

• v-bind:绑定响应式数据

• 触发 input 事件 并传递数据 (核心和重点)

Answer 2

v-model是个语法糖:
v-bind:value="value"
v-on:input="e => value = e.target.value"
因为V-model并不仅限于Form表单, 目前还支持更改事件名称和变量名称
model: {
prop: 'checked',
event: 'change'
}

Answer 3

原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

v-model是默认使用组件的valueprop和input事件

Answer 4

v-model 為一個語法糖，Vue 會默認使用一個名為 value 的 prop，以及名為 input 的事件。

為了避免不同的 value 有不同的作用，現在可以使用下面的方式自訂義自己想要的 v-model 行為。

model: {
  prop: 'checked',
  event: 'change'
}

如果想要更改 checked 這個 prop 可以在 Vue 的 instance 中用以下這行程式發送 change 這個 event，並將目標的變動值傳給 checked 這個 prop。

this.$emit('change', $event.target.value);

Answer 5

标签上使用```
<input type="text" :value="msg" @input="msg=$event.target.value">

{{msg}}

```

Answer 6

原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。