vue2中
作用:双向绑定(一般用来收集用户输入的数据) 使用场景:
- 表单元素
<input v-model="name"> - 非表单元素(组件,第三方组件,自定义组件)
van-dialog, 父子组件数据双向绑定,父组件修改了数据会影响子组件,反过来亦可 从这个意义上,v-model能做的事也可以通过props或$emit来完成
v-model就是一个语法糖 ==> 可以很方便的实现父子传值的效果
<Son v-model="a" />(这里的a是在父组件定义的)相当于:
<Son :value="a" @input="(val)=>{a=val}" />(1)给子组件传递一个props,名为value
(2)监听子组件上的事件input,在回调函数中,将从子组件回传的值保存在a中
vue3中
<Son v-model="myAge" /> (这里的myAge是在父组件定义的)相当于:
<Son :modelValue="myAge" @update:modelValue="(val)=>{myAge=val}" />
将myAge以modelValue为名传给子组件,以及定义了一个自定义事件(子传父),事件名为update:modelValue
(1)给子组件传递一个props,名为modelValue
(2)监听子组件上的事件update:modelValue,在回调函数中,将从子组件回传的值保存在myAge中