父子组件通信
父组件通过设置子组件的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，父组件不在需要手动实现接收事件的处理。
