Vue 2はv-modelを利用してコンポーネントpropsの双方向バインドを実現する優美な解決策である.

プロジェクトでvue 2を使用してプロジェクトを構築し始めました.vue 1とは大きく異なり、propsの双方向バインドがキャンセルされ、親から子にしか伝わらない一方向データストリームに変更されました.初心はもちろんいいですが、双方向バインドがプロジェクトで発生しやすいデータの混乱を避けるためです.

ソリューション1

それからネットやgithubの案などを参考にして、多くの解決策がこのようなものであることを発見しました.

dataオブジェクトでpropsプロパティのコピーを作成する

watch props属性dataコピーを付与コンポーネント外のpropsに対する修正

を同期する

watch dataコピー、emit関数はコンポーネント外

に通知される.
ここでは最も一般的なmodalを例に挙げます.modalは双方向バインドに適しており、外部はコンポーネントの表示または非表示を制御することができ、コンポーネント内部の閉鎖はvisible属性の非表示を制御することができ、visible属性は外部に同期して伝送されます.

///modal.vue    



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;
    }
  }
}



///  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の値を保存し、双方向にバインドすることです.
次のコードに変更します.

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;
    }
  }
}



///  modal  

  

export default {
  name: 'app',
  data () {
    return {
      isShow:false
    }
  }
}

このようにコンポーネントを呼び出すコードが簡潔であるかどうかは、他の人が呼び出すと簡単で、isShowを設定すればmodalコンポーネントの表示や非表示を制御できるとともに、modalコンポーネント内部の閉じるボタンが閉じると、ステータスがisShowに伝わります