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

子页面

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!