自定義元件v-model記錄

在其他一些架構語言中并沒有v-model這麼強大的指令，這麼友善。在react使用value，onchange的方式實作雙向綁定明顯麻煩很多。是以在學習vue的基礎語言文法相對其他來說确實簡單了很多了。

在寫這篇文章前，因為業務需要自定義元件的封裝，就去看了這個關于v-model的自定義元件的實作，我們先看看官方文檔的說明。

從官方和技術文章中我們可以知道,v-model是v-bind以及v-on配合使用的文法糖，舉個例子

<input v-model="value"/>
  <input v-bind:value="value" v-on:input="value=$event.target.value">           

這兩種方式實作是等價的

現在我們已經了解了v-model是什麼東西了，我們除了能在表單元件上實作v-model，能不能在自定義元件實作雙向綁定呢呢？？

答案是可以的。

vue官方文檔的v-model的說明：一個元件上的 v-model 預設會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、複選框等類型的輸入控件可能會将 value 特性用于不同的目的。

也就是說 我們在在自定義元件上使用v-model 的時候 也是 v-bind:value , v-on:input="value=$event.target.value"

這是預設的v-model的形式，我們也可以通過在子元件中的 model上自定義他們的value和event，接下來我們看代碼。

//子元件
<template>
  <div>
    <input  type="text" v-model="checkData">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ''
    }
  },
  computed: {
    inputData: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('checked', val)
         //這個是computed的get  set不是我們的重點， 簡單來說就是 得值和改值時觸發的事件
      }
    }
  },
  model: {
    prop: 'value',
    event: 'checked' // 這裡是我們通過修改預設的value、 input事件 改成我們要使用 checked
  }
}
</script>
// 父元件
<template>
  <div>
    {{msg}}
    <a-input v-model="msg"></a-input>
  </div>
</template>

<script>
import Input from './Input.vue'
export default {
  data () {
    return {
      msg: '12321'
    }
  },
  methods: {
  },
  components: {
    aInput: Input
  }
}
</script>

<style lang="scss" scoped>
</style>           

在上面中我們可以看到v-model在自定義元件的實作。 通過$emit的方式，這樣是我們很常見的元件通信、我們通過這樣的方式傳值。是以在這裡我們就修改的值傳到父元件去修改了。 我們這裡是用computed去實作也是可以的，我們也可以用很多實作的方法，當我們修改的時候，比如watch去觸發，核心的還是$emit 将我們想要傳的值傳給父元件， 還有就是model裡的event設定跟$emit對應即可。

這兩段代碼簡單實作了自定義元件的v-model，接下來我們就可以愉快的使用自定義元件的v-model啦

最後還有個.sync修飾符比較類似這個v-model有興趣的小夥伴可以去看看哦！！！

編者第一次寫，如果有不足之處歡迎指正！如果有上面問題也歡迎提問哦