v-model 语法糖

55 阅读1分钟

1 v-model 在表单元素上使用

   <input v-model="xxx" />
   

2 v-model 在自己定义的组件上使用

  <MyCom :value="xxx" @input="fn" />

v-model 做2件事情:

  1  在父组件中 向子组件传去一个名为 value的属性  (props: ['value'])
  
  2  在子组件中 监听input事件,  this.$emit('input',200)

语法糖用法

     <MyCom v-model="xxx"/>

好处: v-model写法简单,一个指令实现两个功能:子传父(input事件),父传子(value属性)

    一个v-model="xxx"   相当于 :value="xxx" @input="fn"

  

image.png