v-model是如何实现的,语法糖实际是什么?
v-model实现数据的双向绑定,实际是分成两步的:
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
v-model等价于v-bind:value + v-on:input
语法糖的本质是父子组件通信的语法糖,通过prop和$emit实现
下面这个例子更能说明这个语法糖本质:
父组件中:
子组件中:
上面的例子说明父组件把收集的到的value通过props传递给子组件,子组件通过$emit触发父组件的input事件来动态改变父组件收集到的数据