如何移除通過$on方法動態(tài)添加的事件監(jiān)聽器？

<script>
export default {
  created() {
    // 1. 定義具名回調(diào)函數(shù)（確保引用唯一）
    this.handleClick = () => {
      console.log('自定義事件被觸發(fā)');
    };

    // 2. 用 $on 綁定事件
    this.$on('custom-click', this.handleClick);
  },
  mounted() {
    // 模擬事件觸發(fā)
    this.$emit('custom-click'); // 輸出：自定義事件被觸發(fā)
  },
  beforeDestroy() {
    // 3. 用 $off 移除指定事件的指定回調(diào)（關鍵步驟）
    this.$off('custom-click', this.handleClick);
  }
};
</script>

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

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

<!-- 子組件 Child.vue -->
<script>
export default {
  created() {
    // 父組件綁定的 @child-event 會被 Vue 內(nèi)部轉為 $on
    // 子組件可通過 $off 移除（需知道事件名和回調(diào)）
    this.$on('child-event', this.handleChildEvent);
  },
  methods: {
    handleChildEvent() {
      console.log('子組件事件觸發(fā)');
    }
  },
  beforeDestroy() {
    this.$off('child-event', this.handleChildEvent);
  }
};
</script>