vue element-UI dialog作為子組件，怎么在父組件里控制dialog的顯示與隱藏

// 父組件
<Dialog :show="show" @close="show = false" />
// 子組件
<template>
  <div>
    <el-dialog title="提示" :visible.sync="show" width="30%" :before-close="handleClose">
      <span>這是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

// 父組件
<dialog-apply :visible.sync="dialogApplyVisible" />

// 子組件
<el-dialog
      :visible.sync="visible"
      title="申請"
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

// 父組件
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 子組件
<el-dialog
      :visible.sync="visible"
      title="申請"
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}

使用watch

....
  <el-dialog title="提示" :visible.sync="visible" width="30%" :before-close="handleClose">
.....
props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

      visible: false
    }
  },
  watch: {
    show: {
      handler(val) {
        this.visible = val
      },
      immediate: true
    }
  },