vue element父组件控制子组件弹窗关闭与否

父组件

<el-button type="primary" @click="autographDialog = !autographDialog">手签弹窗</el-button>
    <HandSignature
      :autographDialog="autographDialog"
      @closeAutographDialog="autographCloseHandle"
      @autographData="getAutographData"
    />

//手签数据接收
    getAutographData(val) {
      this.autographDialog = false;
      this.resultImg=val;
    },
    // 手签弹窗关闭控制
    autographCloseHandle() {
      this.autographDialog = false; // 控制取消和X按钮，关闭弹窗
    },

子组件

<el-dialog
    title="鼠标手签"
    :visible.sync="autographDialog"
    width="800px"
    custom-class="dialogStyle"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
  >
  </el-dialog>

handleClose() {
      this.$emit("closeAutographDialog"); // 取消和 x 按钮的事件，防止重复操作
    },
    submitForm() {
      this.$emit("autographData", this.resultImg);
    },