父子组件通信

父组件通过设置子组件的props传递数据给子组件，子组件通过$emit发送消息给父组件。

组件及实现

子组件实现一个弹框，父组件通过传递变量控制子组件的显示和隐藏。

代码实现如下。
父组件:

<template
    <el-button type="primary" icon="el-icon-plus" @click="open">打开</el-button>
    <child-dialog :visible="visible" @updateVisible="handleVisible">
    </child-dialog>
</template>

<script>

import ChildDialog  from './ChildDialog'

export default {
    name: 'ParentDialog',
    components: {
        ChildDialog
    },
    data: () => {
        return {
            visible: false
        }
    },
    methods: {
        open:function() {
            this.visible = true;
            },
        handleVisible: function(v) {
            this.visible = v;
        }
    }
}
</script>

子组件:

<template>
<el-dialog :visible="visible" @close="close">
</el-dialog>

</template>

<script>
export default {
    name: "ChildDialog",
    props: ["visible"],
    methods: {
        close: function() {
            this.$emit("updateVisible", false);
        }
    }
}
</script>

父组件传递数据到子组件： 点击打开按钮，调用open函数，父组件设置visible为true, 父组件传递值到子组件，子组件弹框展示。
子组件传递数据到父组件: 关闭子组件弹框，调用close函数，函数调用this.$emit("updateVisible", false)，父组件接收到updateVisible事件，调用父组件函数handleVisible，修改父组件中的数据。

.sync简化实现

在Vue 2.3.0版本，添加了.sync，可以简化流程。
修改父组件实现:

<template
    <el-button type="primary" icon="el-icon-plus" @click="open">打开</el-button>
-    <child-dialog :visible="visible" @updateVisible="handleVisible">
+    <child-dialog :visible.sync="visible" >
     </child-dialog>
</template>

<script>

import ChildDialog  from './ChildDialog'

export default {
    name: 'ParentDialog',
    components: {
        ChildDialog
    },
    data: () => {
        return {
            visible: false
        }
    },
    methods: {
        open:function() {
            this.visible = true;
            },
-        handleVisible: function(v) {
-            this.visible = v;
-        }
    }
}
</script>

子组件实现:

<template>
<el-dialog :visible="visible" @close="close">
</el-dialog>

</template>

<script>
export default {
    name: "ChildDialog",
    props: ["visible"],
    methods: {
        close: function() {
-           this.$emit("updateVisible", false);
+           this.$emit("update:visible", false);
        }
    }
}
</script>

.sync主要简化了$emit发送事件类型，变为update:name，父组件不在需要手动实现接收事件的处理。