vue v-modal语法糖

<elInput v-model="inputData"/>

　　相当于

<elInput :inputValue="inputData" @setValue="val => inputData=val"/>

　　在elInput中可以通过modal来设置要传给组件的属性和方法的名字

elInput.vue组件内容:

<template>
  <div>
    <input :value="inputValue" @input="setInput" />
  </div>
</template>
<script>
export default {
  model: {
    prop: 'inputValue',
    event: 'setValue'
  },
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    setInput(e) {
      this.$emit('setValue', e.target.value)
    }
  }
}
</script>

　　

因此可以看出v-modal是一个的语法糖

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 标签使用 value 属性和 input 事件；
• checkbox 和 radio 标签使用 checked 属性和 change 事件；
• select 标签使用 value属性和 change 作为事件。