v-model的原理?

108 阅读1分钟

v-model是如何实现的,语法糖实际是什么?

v-model实现数据的双向绑定,实际是分成两步的:

  • v-bind绑定一个value属性
  • v-on指令给当前元素绑定input事件

v-model等价于v-bind:value + v-on:input

image.png

语法糖的本质是父子组件通信的语法糖,通过prop和$emit实现

下面这个例子更能说明这个语法糖本质:

父组件中: image.png

子组件中: image.png

image.png

image.png 上面的例子说明父组件把收集的到的value通过props传递给子组件,子组件通过$emit触发父组件的input事件来动态改变父组件收集到的数据