vue中el-dialog打开与关闭的几种方式

<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()
      })
    }
  }
}  

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

<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;
     }
  }
}

<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()
      })
    }
  }
}