【vue】父页面按钮显示子组件中的el-dialog

1.父页面

<template>
    <div>
      <el-button
        type="primary"
        icon="el-icon-upload2"
        size="small"
        @click="openDialog"
      >导入</el-button>
      <uploadDialog ref="uploadDialog" :dialogVisible="dialogVisible" @closeDialog="dialogVisible = false"></uploadDialog>
    </div>
</template>
<script>
//  子组件
import uploadDialog from '@/components/uploadDialog'
export default {
  name: 'test',
  components: {
    uploadDialog
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
</style>

2.子页面

<template>
  <el-dialog title="对话框"  :visible.sync='dialogVisible' :before-close="closeDialog" append-to-body>
    <div class="file-upload">
        <el-button type="primary" size="small" >保存</el-button>
        <el-button @click="closeDialog" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'uploadDialog',
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 关闭对话框
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

3.说明

【说明】
1.dialogVisible是父页面传过来的属性，子页面无法更改，
需要调用父类的方法修改，即this.$emit('closeDialog')
2.父页面中需要在子页面上添加@closeDialog方法
3.父页面中需要给子页面传递dialogVisible属性

4.示例图片