父组件

<template>
  <div>
    <el-button @click="show">按钮</el-button>
    <!-- 新增编辑弹框子组件 -->
    <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef">
    </add-or-update>
  </div>
</template>

<script>
// 引入子组件
import AddOrUpdate from './Edit'
export default {
  data () {
    return {
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false
    }
  },
  // 使用子组件
  components: {
    AddOrUpdate
  },
  methods: {
    // 按钮点击事件 显示新增编辑弹窗组件
    show () {
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      if (data === 'false') {
        this.addOrUpdateVisible = false
      } else {
        this.addOrUpdateVisible = true
      }
    }
  }
}
</script>

子组件

<template>
  <el-dialog title="提示" :visible.sync="showDialog" width="50%" @close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="showDialog = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    // 接受父组件传递的值
    props:{
    addOrUpdateVisible:{
    type: Boolean,
  default: false
        }
    },
  data(){
        return{
    // 控制弹出框显示隐藏
    showDialog:false
        }
    },
  methods:{
    // 弹出框关闭后触发
    handleClose(){
    // 子组件调用父组件方法，并传递参数
    this.$emit('changeShow', 'false')
  }
    },
  watch:{
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal){
    this.showDialog = this.addOrUpdateVisible
  },
    }
}
</script>