Vue props 雙向數據綁定方法

衆所周知vue2中，把prop數據綁定的.sync去掉了，官方給出的緣由是它會破壞「單向數據流」的假設，後來可能由於.sync在實際工做確實有用也很方便，vue2.3+ 又加上去了，不過實現機制稍有變化，詳情請移步vue

在這裏說下在去掉.sync的版本中如何給props數據綁定
在這裏先說下我遇到的情景，父組件中有個按鈕 parent.vue，子組件中是個彈窗 child.vue。
父組件中彈窗值默認爲false,當點擊父組件中的按鈕時 按鈕值爲true且傳給子組件的彈窗值爲true，此時彈出子組件中的彈窗，當關閉彈窗時 彈窗值爲false,且false傳回給父組件。這也是常說的父子組件之間的通訊，方法有不少，我這裏說一種，使用Vue版本爲2.1.8。
請看代碼：

---

parent.vue

<template>
    <div>
        <button @click="showDialog"></button>
        <show-dialog 
            :isDialogVisible= "isDialogVisible"     //動態綁定父組件的數據到子模板的props,當父組件的數據發生變化，改變化也會傳給子組件
            @getDialogVisible="setDialogVisible"  //監聽子組件中$emit的變化
        >
        </show-dialog>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                isDialogVisible: false   //初始化值
            }
        },
        methods:{
            showDialog(){
                this.isDialogVisible = true;  //點擊button時，設值爲true，觸發動態綁定的:isDialogVisible
            },
            setDialogVisible(val){
                this.isDialogVisible = val;
            }
        }
    }
</script>

---

child.vue

<template>
    <div>
        <!--此處使用餓了麼UI組件 版本1.2.9-->
        <el-dialog
            v-model="isDialogVisible"
        >
        </el-dialog>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                isDialogVisible: this.isDialogVisible  //把props的值賦給isDialogVisible
            }
        },
        props:[
            'isDialogVisible'    //接收父組件傳的值，來控制彈窗顯示和隱藏
        ],
        watch:{
            //監聽isDialogVisible變動後對外發送事件通知，好比關閉彈窗時值變爲false,經過$emit通知父組件的getDialogVisible，根據setDialogVisible方法去設置父組件的值
            isDialogVisible(val){
                this.$emit('getDialogVisible', val)
            }
        }
    }
</script>```

大體就是這樣能夠實現父子和子父組件之間的傳值