自定義組件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有興趣的小夥伴可以去看看哦！！！

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