如何移除通过$on方法动态添加的事件监听器？

<script>
export default {
  created() {
    // 1. 定义具名回调函数（确保引用唯一）
    this.handleClick = () => {
      console.log('自定义事件被触发');
    };

    // 2. 用 $on 绑定事件
    this.$on('custom-click', this.handleClick);
  },
  mounted() {
    // 模拟事件触发
    this.$emit('custom-click'); // 输出：自定义事件被触发
  },
  beforeDestroy() {
    // 3. 用 $off 移除指定事件的指定回调（关键步骤）
    this.$off('custom-click', this.handleClick);
  }
};
</script>

<script>
export default {
  created() {
    // 绑定多个回调到同一事件
    this.$on('custom-event', () => console.log('回调1'));
    this.$on('custom-event', () => console.log('回调2'));
  },
  mounted() {
    this.$emit('custom-event'); // 输出：回调1、回调2
  },
  beforeDestroy() {
    // 移除 custom-event 的所有回调
    this.$off('custom-event');
  }
};
</script>

<script>
export default {
  created() {
    this.$on('event1', () => {});
    this.$on('event2', () => {});
  },
  beforeDestroy() {
    // 移除所有事件的所有回调
    this.$off();
  }
};
</script>

<!-- 子组件 Child.vue -->
<script>
export default {
  created() {
    // 父组件绑定的 @child-event 会被 Vue 内部转为 $on
    // 子组件可通过 $off 移除（需知道事件名和回调）
    this.$on('child-event', this.handleChildEvent);
  },
  methods: {
    handleChildEvent() {
      console.log('子组件事件触发');
    }
  },
  beforeDestroy() {
    this.$off('child-event', this.handleChildEvent);
  }
};
</script>