vue2中 this.$emit的用法

<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>