关于vue.js:vue2中-thisemit的用法

<template>
  <el-dialog
    title="申请新性能"
    :visible.sync="applyItemVisible"
    :before-close="hideApplyItem" 
    width="750px"
    v-if="applyItemVisible"
  >
    <el-form
      label-width="100px"
      :ref="pageName"
      :rules="rules"
      :model="applyItem"
      :validate-on-rule-change="false"
    >
      <el-form-item label="申请新性能" prop="items">
        <el-checkbox-group v-model="applyItem.items">
          <el-checkbox
            v-for="(item, key) in options.webConfigKV.item"
            :label="key"
            :key="key"
            :disabled="buyItems.includes(key)"
            >{{item}}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="hideApplyItem"> 取 消 </el-button>
      <el-button type="primary" @click="save" :disabled="btnDisabled"
        > 确 定 </el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {ProductApi} from "@product/api/index";
import {Rules} from "@product/mixin/rules";

export default {
  name: "ApplyItem",
  mixins: [Rules],
  props: {
    applyItemVisible: {type: Boolean,},
    options: {},
    buyItems: {type: Array,},
  },
  data() {
    return {
      pageName: "applyItem",
      tips: false,
      btnDisabled: false,
      applyItem: {items: [],
      },
      rulesInfo: {items: "请抉择须要申请的性能",},
    };
  },
  methods: {hideApplyItem() {this.$emit("hide");
    },
    save() {if (!this.checkRules()) return false;
      ProductApi.applyItem
        .apply({...this.applyItem})
        .then((res) => {if (res.status == "200") {
            let result = res.result;
            this.$message.success("申请胜利！");
            this.hideApplyItem();}
        })
        .finally(() => {this.btnDisabled = false;});
    },
  },
  mounted() {this.setRules();
  },
};
</script>