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

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

监听的事件 以及绑定的属性 可以通过model设置为其他的。

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

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

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

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

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

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

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);

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

{{msg}}

v-model本质上是语法糖，即利用v-model绑定数据，其实就是既绑定了数据，又添加了一个input事件监听

v-model是一个语法糖，对应组件内部实现的话，props传value,触发用$emit('input')

v-model本质上是语法糖，其实就是既用v-bind:value绑定了数据，又用v-on:input添加了一个事件监听