前言​

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！

欢迎大家关注我的知识库，全栈进阶之路·语雀

你的关注就是我前进的动力！

CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。
​

第一种，使用 update:visible

父组件

<child-dialog :visible="visible"></child-dialog>

子组件

<template>
  <el-dialog title="接口实例详情" @open="onOpen" @close="onClose">
    // 主体内容
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    // 弹出框打开事件
    onOpen() {},
    onClose() {
      this.$refs['GxptServiceDialog'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['gialog'].validate(valid => {
        if (!valid) return
        this.close()
      })
    }
  }
}  

第二种 ref

父组件

<child-list></child-list>
<child-dialog ref="dialog"></child-dialog>

this.$refs.dialog.visible=true;在兄弟组件中this.$parent.$refs.dialog.visible = true;
子组件

<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             :width="width"
             append-to-body
             :close-on-click-modal="false"
             @close="close">
     <span slot="footer" class="dialog-footer">
        <div style="text-align: right;padding-bottom:10px">
          <el-button size="medium" type="primary" @click.native="handleSave()">确 定</el-button>
          <el-button size="medium" @click.native="close">取 消</el-button>
        </div>
      </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    }
  },
  methods: {
     close() {
       this.visible = false;
     }
  }
}

第三种 兄弟 bus

父组件

<child-list></child-list>
<child-dialog></child-dialog>

import Vue from 'vue'

export default new Vue()

子组件

<template>
  <el-dialog title="接口实例详情" @open="onOpen" @close="onClose" :visible.sync="visible">
    // 主体内容
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    bus.$on('isVisible', data => {
      this.visible = data
    })
  },
  methods: {
    // 弹出框打开事件
    onOpen() {},
    onClose() {
      this.$refs['dialog'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['gialog'].validate(valid => {
        if (!valid) return
        this.close()
      })
    }
  }
}  

使用
bus.$emit(‘isVisible’, true)
控制弹出框打开与关闭