Vue2 利用 v-model 實現組件props雙向綁定的優美解決方案

在項目中開始使用vue2來構建項目了，跟 vue1 很大的一處不一樣在於2 取消了props 的雙向綁定，改爲只能從父級傳到子級的單向數據流，初衷固然是好的，爲了不雙向綁定在項目中容易形成的數據混亂。

解決方案一

而後開始參考網上和github上的方案等等，發現不少解決方案是這樣的

1. 用data對象中建立一個props屬性的副本

2. watch props屬性 賦予data副本 來同步組件外對props的修改

3. watch data副本，emit一個函數 通知到組件外

這裏以最多見的 modal爲例子：
modal挺合適雙向綁定的，外部能夠控制組件的 顯示或者隱藏，組件內部的關閉能夠控制 visible屬性隱藏，同時visible 屬性同步傳輸到外部

///modal.vue  組件
<template>
  <div class="modal" v-show="visible">
      <div class="close" @click="cancel">X</div>
  </div>
</template>

<script>
export default {
    name:'modal',
    props: {
      value: {
        type: Boolean,
        default:false
      }
    },

  data () {
    return {
      visible:false
    }
  },
  watch:{
      value(val) {
        console.log(val);
        this.visible = val;
      },
      visible(val) {
        this.$emit("visible-change",val);
      }
  },
  methods:{
    cancel(){
      this.visible = false;
    }
  },
  mounted() {
    if (this.value) {
      this.visible = true;
    }
  }
}
</script>


///調用modal組件
<modal :value="isShow" @visible-change="modalVisibleChange"></modal>

export default {
  name: 'app',
  data () {
    return {
      isShow:true,
    }
  },
  methods:{
     modalVisibleChange(val){
       this.isShow = val;
     }
  }
}

這樣就解決了 組件props 雙向綁定的問題。 可是這樣有一個不是太美觀的現象就是 在父級調用 modal組件的時候，還須要寫一個 modalVisibleChange 的methods. 老是顯得這部分代碼是多餘的。 特別是寫一個讓別人用的公共組件，這樣調用太麻煩了。
能不能不寫method來實現props的雙向綁定呢，答案是能夠的。

優美解決方案

那就是利用 v-model, 而後使用value來保存v-model的值，進行雙向綁定

改爲以下代碼：

<template>
  <div class="modal" :value="value" v-show="visible">
      <div class="close" @click="cancel">X</div>
  </div>
</template>

<script>
export default {
    props: {
      value: {
        type: Boolean,
        default:false
      }
    },

  data () {
    return {
      visible:false
    }
  },
  watch:{
      value(val) {
        console.log(val);
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
  },
  methods:{
    cancel(){
      this.visible = false;
    }
  },
  mounted() {
    if (this.value) {
      this.visible = true;
    }
  }
}
</script>


///調用modal組件

  <modal v-model="isShow"></modal>

export default {
  name: 'app',
  data () {
    return {
      isShow:false
    }
  }
}
</script>

這樣調用組件的代碼是否是很簡潔，其餘人員要調用的話，會很輕鬆，只要設置 isShow 就能夠控制 modal 組件的顯示或者隱藏，同時 若是是modal 組件內部關閉按鈕關閉的，狀態也會傳到 isShow