之前一直很好奇element-ui自定義組件是怎么實現(xiàn)雙向綁定的兽叮，后來抽空學(xué)習(xí)了一下灾锯，今天來復(fù)習(xí)一下加深一下記憶吕朵。

首先在components目錄下新建一個名為MyInput的組件衅澈，代碼如下：

// v-model 默認(rèn)接收一個value的參數(shù)和向父組件觸發(fā)一個input的事件
<template>
  <div>
    <input type="text" :value="value" @input="onInput" />
  </div>
</template>

<script>
  export default{
    props: ['value'],
    methods: {
      onInput(e){
        this.$emit('input', e.target.value)
      }
    }
  }
</script>  

然后在父組件引入使用键菱，使用方式如下：

<template>
  <div>
     <my-input v-model="message"></my-input >
  </div>
</template>

<script>
  import MyInput from '@/src/components/MyInput.vue'
  export default{
    components: {
      MyInput 
    },
    data(){
      return{
        message: ''
      }
    }
  }
</script>  

v-model其實就是一個語法糖，就是父組件監(jiān)聽子組件emit發(fā)出的input事件今布，然后把子組件傳來的值賦給了message经备，等同于以下代碼：

<my-input :value="message" @input="message = $event"></my-input>

剛才也說了v-mode默認(rèn)接收的props是value，觸發(fā)的是input事件部默，當(dāng)然我們也可以通過model改一下侵蒙，這樣就更靈活了，雙向綁定就不僅僅只是適用于input組件了傅蹂，就可以像element-ui那樣自定義自己的radio checkbox組件并可以雙向綁定了：

子組件修改如下：

<template>
  <div>
    <input type="radio" :name="label" :value="label" @click="onChange" :checked="radio === label">
    <span>{{label}}</span>
  </div>
</template>

<script>
  export default{
    props: ['label', 'radio'],
    model: {
      prop: 'radio', //父組件監(jiān)聽到click事件以后就會把label的值賦給radio了
      event: 'click' // 父組件的v-model現(xiàn)在默認(rèn)監(jiān)聽的就是click事件了
    },
    methods: {
      onChange(){
        this.$emit('click', this.label)
        this.$emit('change', this.label) // 為了像element那樣纷闺， 我們再派發(fā)一個change，方便我們監(jiān)聽回調(diào)事件
      }
    }
  }
</script>  

父組件修改代碼如下：

<template>
  <div>
    <my-radio v-model="radio" label="label1" @change="onChange"></my-radio>
    <my-radio v-model="radio" label="label2" @change="onChange"></my-radio>
  </div>
</template>

<script>
  import MyRadio from '@/src/components/MyRadio.vue'
  export default{
    components: {
      MyRadio
    },
    data(){
      return{
        radio: 'label1' // 默認(rèn)選中l(wèi)abel1
      }
    },
    methods: {
      onChange(){
          console.log(val)
      }
    }
  }
</script>  

現(xiàn)在就可以靈活自定義自己的雙向綁定組件了份蝴，如果組件使用頻繁的話犁功，可以注冊到全局組件，就不用一次次引入了婚夫。