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>```

大体就是这样能够实现父子和子父组件之间的传值