v-model的理解

v-model的理解

1、v-model實現原理
2、自定義組件使用v-model

v-model原理

在vue中，對<input>標籤使用v-model指令可以實現數據的雙向綁定；其原理是利用<input>標籤的value屬性和input事件；

下面是我們使用v-model的方式：

<input v-model="inputVal" type="text">
<div class="show-panel">{{ inputVal }}</div>

export default {
  data() {
    return {
      inputVal: ''
    }
  }
}

效果如下：

爲了更好的理解v-model的原理，我們先模擬v-model的實現：

利用vue模擬v-model的實現：

<input :value="inputVal" type="text" @input="inputVal = $event.target.value">
<div class="show-panel">{{ inputVal }}</div>

爲<input>標籤添加了value屬性以及input事件，當我們在輸入內容時，觸發input事件，將<input>標籤中的值賦給inputVal變量。

原生js模擬v-model的實現

<input id="input" type="text" oninput="handleInput()">
<div class="show-panel"></div>

let inputEle = document.querySelector('#input')
let showPanelEle = document.querySelector('.show-panel')
let inputVal = ''
// 將inputVal的值賦給input標籤的value屬性
inputEle.value = inputVal

function handleInput() {
  // 獲取input標籤的value屬性值，並賦給inputVal、showPanelEle
  inputVal = inputEle.value
  showPanelEle.innerHTML = inputEle.value
}

最開始將inputVal的值賦給<input>標籤的value屬性，當輸入內容時，觸發input事件，獲取<input>標籤中最新的value屬性值，並將輸入值賦給inputVal變量和showPanelEle元素。

結合上面v-model的實現，可以看出v-model利用了表單元素（<input>）的value屬性和input事件，通過定義一個變量inputVal，並將inputVal賦給表單元素的value屬性，當觸發表單元素的input事件時將最新的輸入值更新給變量inputval，進而實現雙向綁定。

自定義組件使用v-model

我們知道表單元素本身具有input事件，在輸入內容時，可以觸發，但是在vue中，對於自定義組件，當自身沒有input事件時，還可以使用v-model嗎？

答案是可以使用的，對於自定義組件，當我們使用v-model後，組件會自動多了一個value屬性值和名爲input的自定義事件（這一切都是vue幫我們實現的），具體如下：

如下是一個HelloWorld.vue組件：

// HelloWord.vue
<template>
  <div>
    <h1>{{ value }}</h1>
    <button @click="handleClick">點擊更新文本</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('input', 'Hi, Vue')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

我們在使用HelloWorld.vue組件時候用了v-model

<hello-world v-model="inputVal"></hello-world>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      inputVal: 'hello, v-model'
    }
  }
}
</script>

我們在HelloWorld.vue中可以獲取一個名爲value的屬性，當我們需要改變該屬性值時，通過觸發一個名爲input的自定義事件即可，這就是在自定義組件中使用v-model的方法。

效果如下：

如果不使用v-model還想達到相同的效果，我們需要這樣做：

<hello-world :value="inputVal" @input="handleInput"></hello-world>

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      inputVal: 'hello, v-model'
    }
  },
  methods: {
    handleInput(val) {
      this.inputVal = val
    }
  }
}

綜上所述，我們可以知道v-model是一種語法糖，它利用了標籤（表單元素、自定義元素）的value屬性和input事件（對於表單元素，input事件是本身原有的事件，對於自定義組件，input事件就是一個名爲input的自定義事件）實現了雙向綁定。

參考文獻：

[1] 表單輸入綁定
[2] Vue之自定義組件的v-model