vue組件封裝 -- 雙向綁定 v-model的本質

引言

當我們在封裝vue組件的時候，經常會想要父組件與子組件有一個雙向綁定數據v-model，例如elementUI 的 input

但是，子組件和父組件是不能直接使用 v-model的，那麼應該怎麼做呢？

一、v-model的本質

所謂 v-model就是一個語法糖，實際上，它是由 v-bind(:)和 @input兩個合在一起的一個縮寫

也就是說：v-model 可以分解爲：

1. v-bind
2. @input

例如 :

<input type="text" v-model="value">

等於：

<input type="text" :value="value" @input="handleInput">

handleInput (e) {
	this.value = e.target.value
}

二、實現父子組件的雙向綁定

原理：

1. 分解v-model，變成兩個語法
2. 利用父子組件的通信

父組件使用

<dh-input v-model="value"></dh-input>

子組件獲取

<template>
  <div class="dh-input">
    <input :value="value"
           @input="handleInput">
  </div>
</template>
<script>
export default {
  name: 'DhInput',
  props: {
    value: null  // 使用v-bind 獲取傳來的數據
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value) // 使用子傳父，發送數據
    }
  }
}
</script>