Vue2、Vue3中v-model的本质以及作用在组件上的用法（简单易懂）

vue2、vue3中v-model的本质以及作用在组件上的用法

v-model介绍

摘自vue官网

v-model本质

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

什么是语法糖？
语法糖，简单来说就是便捷写法

正常情况可以用 v-model 指令只作用表单<input>、<textarea> 及 <select> 元素上

1. 作用在表单上本质就是用input事件试试监听文本状态从而实时改变对应的值

   <input v-model="searchText" />
   // 等价于
   <input :value="searchText" @input="searchText = $event.target.value" />
   

2. 作用在组件上本质就是 组件用props接收传入属性内部用emit抛出事件在父组件修改对应属性（见下面图例解释👇）

vue2 v-model作用在组件

vue3 v-model作用在组件

到这里就结束了，后续还会更新 vue 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！




推荐文章👇
Vue之v-model双向绑定原理
v-model讲解