vue.js 父子組件間 props 數據同步處理

常見的場景：

在一個vue組件A中，使用另外一個組件B。A將自己的數據通過B組件的Props屬性（propX）傳遞到B組件實例內部，B組件內部會修改該Props屬性（propX）的值，此時在A組件內部的數值是否會收到影響呢？如下：

<template>
............
<el-dialog title="XXXX" :visible="show">
   ...............
</el-dialog>
.............
</template>

<script>
export default {
  name: "A",
  data() {
    return {
        show:true
    };
  },
  methods:{
    ............
  }
}

上面的組件A中使用了 el-dialog，並綁定了 el-dialog 的 visible值為show。在程序運行起來后 el-dialog 默認彈出，手動關閉 el-dialog 此時在組件A中show的值會是什么呢？仍然是true，並不是false。

造成這種問題的原因就是 el-dialog 內部 對 visible 屬性的修該，並不能同步回到父組件A中的show。要解決上面的 el-dialog 不能同步回 visible 變化的問題很簡單：

<el-dialog title="XXXX" :visible.sync="show">
   ...............
</el-dialog>

這樣 el-dialog 對 visible 的修改就能同步到父組件A的show上。

問題完美解決了，那到底是如何解決的呢？不如打開 el-dialog 的源碼學習一下：

hide(cancel) {
        if (cancel !== false) {
          this.$emit('update:visible', false);
          this.$emit('close');
          this.closed = true;
        }
      }

實際上是在關閉時調用hide函數通過this.$emit('update:visible', false)來更新 visible 的值。

既然如此，我們自定義的組件也可以如法炮制，使其Props屬性支持sync

子組件：

<template>
    <div>
        <button @click="click">點我</button>
    </div>
</template>
<script>
export default {
    name:"cx",
    props:{
        propx:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {

        }
    },
    methods:{
        click(){
            this.$emit("update:propx",false)
        }
    }
    
}
</script>

父組件：

<template>
  <div id="app">
    <cx :propx.sync="v"></cx>
  </div>
</template>

<script>

import cx from './packages/cx'
export default {
  name: 'app',
  components:{
    "cx":cx
  },
  data () {
    return {
      v:true
    }
  },
  methods:{
  }
}
</script>

效果：

 

點擊后：