技術標籤：筆記vue

v-modal是一個語法糖，我們直接看示例

<!-- 父元件 -->
<template>
    <div>
        <div>{{ inputVal }}</div>
        <InputCom v-model="inputVal"/>
        
        <!-- 同樣可以寫成下面的形式 -->
        <!-- <InputCom :value="inputVal" @input="val => inputVal = val"/> -->
    </div>
</template>

<script>
import InputCom from './InputCom';
export default {
    components: { InputCom },
    data() {
        return {
            inputVal: ''
        }
    }
}
</script>

<!-- 子元件 -->
<template>
    <input :value="value" @input="$emit('input', $event.target.value)"/>
</template>

<script>
export default {
    props: ['value']
}
</script>
 

從上面的示例我們可以看到，父元件通過 v-model 雙向綁定了一個值：inputVal ；在子元件中就預設得到了一個名為 value 的 prop 和一個 input 方法，就可以監聽 input 元素的 input 事件（我們一般用input事件，當然也可以是其他事件）並 $emit 給父元件來修改父元件的 inputVal 值。當然這是 v-model 預設的情況，我們還可以通過 model 的配置來修改預設的 prop 以及事件。

<!-- 子元件 -->
<template>
    <input :value="haha" @input="$emit('setValue', $event.target.value)"/>
</template>

<script>
export default {
    model: {
        prop: 'haha',
        event: 'setValue'
    }
    props: ['haha']
}
</script>
 

上面的示例中我們修改了 model ，將子元件從父元件收到的 prop 名稱變成了 "haha" ，將事件從預設的 input 事件變成了 setValue 事件，同樣也實現 v-model 的自定義。

接下來我們實現一個自定義 v-model 的元件

<!-- 子元件 -->
<template>
  <div>
    <button @click="handleMinus">-</button>
    <input ref="input" type="text" :value="haha" @input="handleInput">
    <button @click="handlePlus">+</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'haha',
    event: 'setValue'
  },
  props: ['haha'],
  methods: {
    handleInput(e) {
      this.$emit('setValue', e.target.value)
    },
    handleMinus() {
      const val = Number(this.$refs.input.value);
      this.$emit('setValue', val - 1)
    },
    handlePlus() {
      const val = Number(this.$refs.input.value);
      this.$emit('setValue', val + 1)
    },
  }
}
</script>
 

因此可以看出v-modal是一個的語法糖

v-model在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件：

• text 和 textarea 標籤使用value屬性和input事件；
• checkbox 和 radio 標籤使用checked屬性和change事件；
• select標籤使用value屬性和change作為事件。