vue子组件作为slot如何触发父组件的事件，slot踩坑记录

最近写了一个checkbox组件。跟其他的ui组件库一样。被checkbox-group组件包裹，根据其v-model绑定的值，用于储存多选框被选中的值。

<checkbox-group v-model="checkList">
   <checkbox
      v-for="(item,index) in data"
      v-bind:key="index"
      :label="item.name"
      :value="item.id"
    ></checkbox>
</checkbox-group>

CheckboxGroup.vue

<template>
  <div class="checkbox-group-wrap">
    <slot></slot>
  </div>
</template>
export default class extends Vue {
  private checkBoxGroup: string[] = [];
  private pushItem(value) {
    this.checkBoxGroup.push(value);
    this.$emit("input", this.checkBoxGroup);
  }
  private removeItem(value) {
    const index = this.checkBoxGroup.indexOf(value);
    this.checkBoxGroup.splice(index, 1);
    this.$emit("input", this.checkBoxGroup);
  }
}

而插槽slot是无法进行自定义事件的监听的，即Checkbox组件不能在多选框选中后触发slot的pushItem事件并传值

<slot @pushItem="pushItem"></slot>  // 错误的写法

解决办法

checkboxGroup.vue

private mounted() {
    this.$on("pushItem", this.pushItem);  // 在mounted生命周期注册事件
    this.$on("removeItem", this.removeItem);
  }

Checkbox.vue

private handleClick() {
    if (!this.isChecked) {
      this.$parent.$emit("pushItem", this.value); 
      // this.$parent.$emit()触发事件
    } else {
      this.$parent.$emit("removeItem", this.value);
    }
    this.isChecked = !this.isChecked;
    this.$emit("input", this.isChecked);
  }