vue使用emit控制改变父组件的值，实现子组件的显示与隐藏

需求概述

父组件在提交表单后，弹框进行提示，子组件是一个弹框。

vue版本

v2.x

实现原理

在父组件内建立控制器isShowModal，使用v-if来控制子组件的显示与隐藏。在子组件通过emit操作其父组件方法changeShowHide，改变自己的控制器isShowModal的值，实现弹框的隐藏。

优缺点分析

**优点：**同一父组件如果需要显示多个，直接多建立几个组件和控制器即可，无需改变子组件代码，耦合性较低。

效果图

完整代码demo

父组件

// 父组件
<template><div class="wCen"><h2>父组件调用弹框子组件</h2><el-button type="primary" @click="changeShowHide(true)" >显示弹框--{{isShowModal}}</el-button><el-button type="primary" @click="changeShowHide2(true)">显示弹框2-{{isShowModal2}}</el-button><el-button type="primary" @click="changeShowHide3(true)">显示弹框3-{{isShowModal3}}</el-button><Child v-if="isShowModal" @changeShowHide="changeShowHide(false)"></Child><Child v-if="isShowModal2" @changeShowHide="changeShowHide2(false)"></Child><Child v-if="isShowModal3" @changeShowHide="changeShowHide3(false)"></Child></div>
</template><script>
import Child from "@/components/common/Modal/index.vue";
export default {props: {},components: {Child,},data() {return {isShowModal: false,isShowModal2: false,isShowModal3: false,};},computed: {},mounted() {},methods: {changeShowHide(flag){this.isShowModal=flag},changeShowHide2(flag){this.isShowModal2=flag},changeShowHide3(flag){this.isShowModal3=flag}},
};
</script><style lang="scss" scoped>
.wCen{width:1200px;margin:20px auto;
}
</style>

子组件

<template><div><div class="modal" ><div class="modal_con"><!-- <img src="@/assets/images/icon_close_white.svg" alt="" class="modal_con_close" @click="close"/> --><p class="modal_con_close" @click="close">X</p><p class="modal_con_t">提示</p><p class="modal_con_desc">提交成功!</p><p @click="close" class="modal_con_btn">确定</p></div></div></div>
</template><script>
export default {data() {return {};},computed: {},mounted() {},methods: {close(){this.$emit("changeShowHide");},},
};
</script><style lang="scss" scoped>.modal{width: 100%;height: 100%;left:0;top:0;right:0;bottom:0;display: flex;justify-content: center;align-items: center;position: fixed;z-index: 99999099999999;background: rgba(200,200,200,.5);&_con{$r:10px;width: 300px;background: #fff;border-radius: $r;position: relative;display: flex;justify-content: center;align-items: space-between;flex-direction: column;box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.21);&_close{position: absolute;right:-22px;top: -22px;width: 26px;flex: 0 0 26px;background-color: #666;border-radius: 50%;padding:6px;cursor: pointer;color: #fff;height: 26px;display: flex;justify-content: center;align-items: center;padding: 0;margin: 0;font-size: 12px;user-select: none;}&_t{background-color: rgba(208,3,0,.5);border-top-left-radius: $r;border-top-right-radius: $r;padding:8px 14px;color: #fff;overflow: hidden;font-weight: bold;}&_desc{font-size: 16px;display: flex;justify-content: center;align-items: center;padding-top: 10px;padding-bottom: 20px;}&_btn{background-color: rgba(208,3,0,.6);padding:5px 12px;display: inline-flex;justify-content: center;align-items: center;border-radius: 4px;color: #fff;align-self: center;font-size: 14px;cursor: pointer;user-select: none;margin-bottom: 10px;}}@media (max-width:767px){&_con{width: 240px;&_t{padding:6px 14px;}&_desc{padding-bottom: 10px;}}}}
</style>

---

如果您觉得此文章对您有帮助，请点赞收藏评论，让更多的同行少走弯路！如果您觉得此文章有不足或者错误，欢迎评论/私信进行指导