最近在研究如何寫一套基於Vue2.x的UI元件給自己用，提升一點BIG，在製作含有input的元件遇到一個問題：不知怎樣才能把子元件中input與呼叫者（父元件）的資料實現雙向繫結，想過使用Vuex，但觀摩了一下其他優秀的UI框架，發現使用Vuex會給其他使用者造成麻煩，於是決心找到尋求解決方法，在參考了幾篇大牛們文章後，終於找到。

在這將解決方案貼出，希望能幫助到和我一樣初次接觸Vue這個框架的同行們。

子元件的程式碼邏輯

<template>
  <div class="ne-ipt">
    <input type="text" v-model="currentValue">
  </div>
</template>

<style lang="less" scoped>
  @import "../../assets/styles/form/form.less";
</style>

<script>
  export default {
    name: 'NeIpt',
    props: {
      // 接收一個由父級元件傳遞過來的值
      value: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    computed:{
      currentValue: {
        // 動態計算currentValue的值
        get:function() {
          return this.value; // 將props中的value賦值給currentValue
        },
        set:function(val) {
          this.$emit('input', val); // 通過$emit觸發父元件
        }
      }
    }
  }
</script>
 

父元件程式碼邏輯

<template>
  <div id="button-index">
    <ne-ipt placeholder="姓名" v-model="test"></ne-ipt>
  </div>
</template>
<style>
</style>
<script>
  import NeIpt from './NeIpt'
  export default {
    name: 'form-index',
    data () {
      return {
        test: ''
      }
    },
    components: {
      NeIpt
    }
  }
</script>
 

在修改子元件的currentValue的時候其實通過$emit觸發input事件將值傳遞給呼叫者的v-model，從而實現雙向繫結。

以上是我個人的理解，如有不對還請各位大大批評指正。

參考資料：