Vue理解v-model內部運作

#webdev #vue

前言

在Vue中，input、select、textarea等tag會利用v-model這個屬性來做雙向綁定

<input v-model="email" />

上面的code相當於下面的code

<input :value="email" @input="e => email = e.target.value" />

在 component 使用 v-model

<basic-input v-model="email" />

元件code

<template>
  <input @input="handleInput" />
</template>

<script>
export default {
  prop: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  }
}
</script>