父组件:

<template>
  <div>
    <el-button type="text" @click="handleClick()"> 导出</el-button>
    <span>{{numberScope}}</span>
    <EDialog :visible.sync="detailsVisible" :numberScope.sync="numberScope"></EDialog>
  </div>
</template>
<script>
import EDialog from "@/components/common/exportDialog.vue";
export default {
  components: {
    EDialog,
  },
  data() {
    return {
      //展示弹框的值
      detailsVisible: false,
      //子组件传递的参数
      numberScope: {},
    };
  },
  methods: {
    //点击按钮需要显示弹框
    handleClick() {
      // console.log("点击了")
      this.detailsVisible = true;
    },
    
  },
};
</script>
子组件

```javascript
<template>
  <div class="exportDialog">
    <el-dialog
      title="导出数量"
      :visible.sync="visible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
      width="500px"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="起始位置" prop="startNumber">
          <el-input
            v-model="ruleForm.startNumber"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="结束位置" prop="endNumber">
          <el-input v-model="ruleForm.endNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm('ruleForm')"
            >确定导出</el-button
          >
          <el-button size="small" @click="resetForm('ruleForm')"
            >取消导出</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: { default: false },
    numberScope: { default: {} },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      let reg = /^\+?[1-9]\d*$/;
      if (value === "") {
        callback(new Error("请输入开始位置"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正整数"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      let reg = /^\+?[1-9]\d*$/;
      if (value === "") {
        callback(new Error("请输入结束位置"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正整数"));
      } else if (value < this.ruleForm.startNumber) {
        callback(new Error("结束位置应该大于开始位置"));
      } else if (value - this.ruleForm.startNumber > 10000) {
        callback(new Error("一次导出数量不超过一万条数据!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        startNumber: "",
        endNumber: "",
      },
      rules: {
        startNumber: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        endNumber: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //给父组件关闭的时候
    close(prop) {
      this.$emit("update:visible", false);
      this.$emit("update:numberScope", prop);
      this.ruleForm={};
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.close(this.ruleForm);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          console.log("kankanshuju", this.ruleForm);
          this.close(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

直接考进去就能使用,解决的问题:1.确认导出,关闭导出2.父子之间传参
未解决的问题:不能使用右上角的小叉叉,所以使用
:show-close="false"
把小叉叉给隐藏了.亲测有效,可以使用,因为弹框是懒加载,所以如果有什么修改没起作用,记得试一试重启代码.