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>