v-model 双向绑定的原理

4,251 阅读1分钟

vue2中

作用:双向绑定(一般用来收集用户输入的数据) 使用场景:

  1. 表单元素 <input v-model="name">
  2. 非表单元素(组件,第三方组件,自定义组件)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中