父子组件之间相互控制传值，子组件控制父组件的值

需求概述

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

vue版本

v2.x

实现原理

在父组件内建立控制器isShowModal，使用v-if来控制子组件的显示与隐藏。在子组件通过操作其父组件属性parent下的isShowModal，从而实现弹框的隐藏。

优缺点分析

**优点：**组件调用，无需传参，直接使用父组件控制器即可。
**缺点：**耦合性比较高，同一父组件如果需要显示多个，除了需要另外建立控制器，还需要在子组件内的close方法添加对新的控制器的控制代码，如下

close(){
   this.$parent.isShowModal=false
   this.$parent.isShowModal2=false // 每添加一个自子组件都需要，在这里重新添加一行代码 
},

当然，如果是一样的结构，只是提示内容不同时，可以使用同一个子组件，对内容进行传值。

效果图

在这里插入图片描述

完整代码demo

父组件

// 父组件
<template>
  <div class="wCen">
    <h2>父组件调用弹框子组件</h2>
    <el-button type="primary" @click="isShowModal = true">显示弹框</el-button>
    <Child v-if="isShowModal"></Child>
  </div>
</template>

<script>
import Child from "@/components/common/Modal/index.vue";
export default {
  props: {},
  components: {
    Child,
  },
  data() {
    return {
      isShowModal: false,
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</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 {
  props: {
  },
  data() {
    return {
    };
  },
  computed: {},
  mounted() {
  },
  methods: {
    close(){
        this.$parent.isShowModal=false
    },
  },
};
</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%;
                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>