父组件中使用element组件的dialog 点击无响应或者再次点击无效问题

方法一：抽离组件后 如果我们点击按钮弹窗子组件的弹窗使之显示在父组件中

那么就要更改子组件的dialogVisible值，要使用ref 关联子组件 这样我们才可以更改其值  话不多说，直接上代码

如果不将子组件的dialogVisible传给父组件 那么这个弹框很可能出现点击没有反应，

 

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
</el-dialog>

<script>
  export default {
    name:"upload",
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

 

<template>
  <div id="App"> 
    <el-button @click="showUpload">上传文件</el-button>
    <upload ref="upload"></upload>

  </div>
</template>
 
<script>
import upload from "../src/components/upload.vue"
  export default {
    name: 'App',
    components:{
      upload
    },
    data () {
      return {
        
      }
    },
    methods: {
      showUpload(){
        this.$refs.upload.dialogVisible=true
      },
    }
  }  
</script>
 
<style scoped>
  .div-label {
    padding: 20px 0;
    width: 100%;
  }
</style>

方法二：我们分别用各自的组件管理各自的变量和对象，推荐方法二  完整代码如下

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
  >
    <el-card>
      <!-- 下载数据模板 -->
      <div class="div-label">
        <label
          >上传文件之前请先下载<span style="font-weight: bold"
            >数据模板</span
          ></label
        >
      </div>
      <el-button
        @click="download"
        class="el-button-color add-button-box"
        size="medium"
        type="primary"
      >
        <i class="el-icon-download el-icon--right"></i>下载数据模板
      </el-button>
      <!-- 上传文件 -->
      <div class="div-label">
        <label
          >上传文件，仅支持<span style="font-weight: bold">.xlsx</span
          >格式的Excel文件，且大小不超过<span
            style="font-weight: bold; color: red"
            >10MB</span
          ></label
        >
      </div>
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        accept=".xlsx"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :on-preview="handlePreview"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
        :http-request="httpRequest"
        :on-success="handleSuccess"
        :on-error="handleError"
      >
        <el-button slot="trigger" size="medium" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="medium"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
      </el-upload>
    </el-card>
  </el-dialog>
</template>

<script>
export default {
  name: "x-upload",
  data() {
    return {
      dialogVisible: false,
      fileList: [],
    };
  },
  props:{
    dialogShow:{
      type:Boolean,
      default:false
    },
  },
  watch:{
    // 这里监听dialogShow对象的变化
    dialogShow:{
      deep:true,
      handler(val){
        if(val){
          this.dialogVisible=true;
        }
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          // this.dialogVisible=false
          this.$emit("update:dialogShow",false)
        })
        .catch((_) => {});
        
    },
    // 下载本地文件
    download() {
      window.location.href = "http://localhost:8080/static/test.xlsx";
    },

    // 超过文件上传最大个数
    handleExceed(files, fileList) {
      this.$message.warning("很抱歉当前支持最大上传文件个数为 1 个！");
    },
    // 文件上传到服务器之前的文件校验
    beforeUpload(file) {
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      const size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        // 校验文件格式
        this.$message.warning("只支持上传后缀名为.xlsx的Excel文件");
      }
      if (size > 10) {
        // 校验文件大小
        this.$message.warning("文件大小不能超过10MB");
      }
    },
    // 文件状态改变
    handleChange(file, fileList) {
      if (file) {
        this.fileList = fileList.slice(-3);
      }
    },
    // 文件删除时
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = []; // 文件列表置空
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    // 文件上传成功
    handleSuccess(response, file, fileList) {
      console.log("-------handleSuccess-------");
      console.log(response);
      this.$message.success("文件 [" + file.name + "] 上传成功");
    },
    // 文件上传失败
    handleError(err, file, fileList) {
      console.log("-------handleError-------");
      console.log(err);
      this.$message.error("文件上传失败");
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    httpRequest(param) {
      console.log(param);
      const fileObj = param.file; // 获取file文件
      const formData = new FormData(); // FormData对象
      formData.append("file", fileObj); // file封装到FormData里
      // 请求后台上传数据的接口
      this.$http
        .post("/upload", formData, {
          headers: { "Content-Type": "multipart/form-data" },
          // url: '/upload',
          // data: formData
          // method: 'post'
        })
        .then(
          (res) => {
            console.log("-------res--------");
            console.log(res);
            if (res.data.meta.status === "200") {
              this.$message.success(res.data.meta.msg);
              // 清空文件列表
              this.fileList = [];
            } else {
              this.$message.error(res.data.meta.msg);
            }
          },
          (err) => {
            console.log("-------err--------");
            console.log(err);
            this.$message.error(
              "上传文件内容有问题，请保证上传文件字段均不为空且正确"
            );
          }
        );
    },
    // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        // 上传文件列表为空
        this.$message.warning("请选择一个上传文件");
      } else {
        // 执行上传操作
        this.$refs.upload.submit();
      }
    },
  },
};
</script>

<style>
</style>

<template>
  <div id="App"> 
    <el-button @click="showDia">上传文件</el-button>
    <!-- <el-button type="text" @click="showUpload">点击打开 Dialog</el-button> -->
    <!-- 上传文件弹窗 -->
    <x-upload :dialog-show.sync="dialogShow"></x-upload>
    <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <upload v-if="seen"></upload> -->
  </div>
</template>
 
<script>
import XUpload from "../src/components/x-upload.vue"
  export default {
    name: 'App',
    components:{
      XUpload
    },
    data () {
      return {
        dialogShow:false,
        seen:false
        
      }
    },
    methods: {
      // showUpload(){
      //   this.$refs.upload.dialogVisible=true
      // },
      // 控制上传文件弹窗
      showDia(){
        this.dialogShow=true
      }
    }
  }  
</script>
 
<style scoped>
  .div-label {
    padding: 20px 0;
    width: 100%;
  }
</style>