在vue中实现父页面按钮显示子组件中的el-dialog效果

前端  /  管理员 发布于 1年前   425

在vue中实现父页面按钮显示子组件中的el-dialog功能

父页面示例代码：

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

子页面示例代码：

<template>
  <el-dialog title="对话框"  :visible.sync='dialogVisible' :before-close="closeDialog" append-to-body>
    <div>
        <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 scoped>
</style>