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 作為事件。