Main idea: when the text box gets the focus, first assign the previous value to a variable, then click the confirm button to send the value to the parent component, and click the Cancel button to return the previous old value to the parent component.

Substandard components

<template>
  <!-- input Input box S -->
  <tr class="InputVal">
    <td class="title">
      <span v-if="isCheck" class="flag">*</span>{{ title }}:
    </td>
    <td class="val">
      <el-input
        :placeholder="tips"
        v-model="val"
        clearable
        size="mini"
        @focus="inputFocus"
        @blur="inputBlur(true)"
        :disabled="disabled"
      />
    </td>
    <td>
      <span :class="is_err ? 'err' : 'msg'">{{ tips }}</span>
    </td>
  </tr>
  <!-- input Input box E -->
</template>

<script>
/**
 * *** Input input box not verified
 * @getInputVal         Function type of get value passed by parent: function default: () = > {}
 * @tips                Type of error message passed by parent: character default: '' remarks: display if there is value
 * @value               Default value type passed by parent: character default: ''
 * @disabled            Disable type of parent delivery: Boolean default: false
 * @isCheck             Required type of parent delivery: Boolean default: false
 * @isErr               The parent passes the display red burst (error prompt) type: Boolean default: false
 * */

export default {
  name: "RelativePath",

  props: {
    getInputVal: {
      type: Function,
      default: function() {
        return () => {};
      }
    },

    title: {
      type: String,
      default: "Module name"
    },

    tips: {
      type: String,
      default: ""
    },

    isCheck: {
      type: Boolean,
      default: false
    },

    isErr: {
      type: Boolean,
      default: false
    },

    value: {
      type: [String, Number],
      default: ""
    },

    disabled: {
      type: Boolean,
      default: false
    },

    popoverText: {
      type: String,
      default: ""
    },

    gitInputBlur: {
      type: String,
      default: ""
    },

    serviceVal: {
      type: [String, Number],
      default: ""
    },

    serviceSwitch: {
      // Open service access or not
      type: Boolean,
      default: false
    },

    serviceWarning: {
      // Prompt message
      type: String,
      default: ""
    },

    modify: {
      // Modify the page to pop up the confirmation box
      type: Boolean,
      default: false
    }
  },

  watch: {
    serviceSwitch: {
      handler(val) {
        this.needCheck = val;
      },
      deep: true
    }
  },

  created() {
    this.val = this.serviceVal;
    this.needCheck = this.serviceSwitch;
  },

  data() {
    return {
      error: true, //Verify that the default verification passes
      reg: /(^ +| +$)/gi, //Check blank
      val: this.value, //input data
      is_err: this.isErr,
      needCheck: false,
      oldInputVal: ""
    };
  },

  methods: {
    //Get focus events
    inputFocus() {
      this.is_err = false;
      this.oldInputVal = this.val;
    },

    //Loss of focus event
    inputBlur() {
      let isCheck = this.isCheck;
      let val = "";
      if (this.val && typeof this.val == "string") {
        val = this.val.replace(this.reg, "");
      }
      this.val = val;
      if (isCheck) {
        if (val == "") {
          this.is_err = true;
        }
      } else {
        this.is_err = false;
      }
      let reg = /^[0-9a-zA-Z-]{1,}$/;
      if (!reg.test(this.val)) {
        this.$message.error({
          message: "Service name only supports alphanumeric dash~",
          duration: 3000
        });
        this.is_err = true;
      } else {
        if (this.needCheck && this.modify) {
          this.$confirm(`${this.serviceWarning}`, "Tips", {
            confirmButtonText: "Determine",
            cancelButtonText: "cancel",
            type: "warning"
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "Modified success!"
              });
            })
            .catch(() => {
              this.val = this.oldInputVal;
              this.$message({
                type: "info",
                message: "Modification cancelled"
              });
            });
        }
        this.getInputVal(this.val);
      }
    }
  }
};
</script>

<style lang="less">
.InputVal {
  .el-button--mini.is-circle {
    margin-left: 5px;
    padding: 0px;
  }
  .flag {
    padding-right: 5px;
    position: relative;
    top: 2px;
    color: red;
  }
  .msg {
    font-size: 12px;
    color: #ccc !important;
  }
}
</style>

Parent component

 <!-- Service port S -->
 <template>
              <ConfirmInput
                title="Service port"
                :isCheck="true"
                :getInputVal="getServicePort"
                :serviceVal="servicePort.val + ''"
                :disabled="servicePort.disabled"
                :tips="servicePort.errMsg"
                :isErr="servicePort.isErr"
                :serviceSwitch="serviceSwitch.val"
                :serviceWarning="serviceWarning"
                :modify="true"
              />
              <!-- Service port E -->
 </template>
 <script>
 import ConfirmInput from "@/views/index/assem/form/ConfirmInput.vue"; //Input box not verified
export default {
  name: "ModifyTasks",

  components: {
       ConfirmInput
  },
data() {
    return {
    servicePort: {
        val: "", // Service port entered
        errMsg: "Please enter the service port,It has to be numbers~", //error message
        disabled: false, //Is it forbidden?
        isErr: false //Is it red?
      },
     }
},
 methods: {
 // Get the server port entered
    getServicePort(val) {
      this.servicePort.val = val;
    },
 }