在 Vue 中，通過 $on 方法動態添加的事件監聽器，需要使用 $off 方法來移除。核心原則是：$off 的參數必須與 $on 完全匹配（事件名和回調函數引用一致）。以下是具體實現方法及場景示例：
$on 用于綁定事件，$off 用于移除，兩者參數對應關系如下：
這是常用的場景，需確保 $off 的回調函數與 $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>
若一個事件綁定了多個回調，可通過 $off('eventName') 一次性移除所有。
<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>
若需清空組件上所有通過 $on 綁定的事件，直接調用 $off() 即可（無參數）。
<script>
export default {
created() {
this.$on('event1', () => {});
this.$on('event2', () => {});
},
beforeDestroy() {
// 移除所有事件的所有回調
this.$off();
}
};
</script>
父組件通過 v-on 綁定子組件的自定義事件，本質是子組件內部通過 $on 處理，子組件可在卸載時用 $off 移除。
<!-- 子組件 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>
$on 若使用匿名函數綁定，$off 無法找到相同引用，導致移除失敗。
this.$on('custom-event', () => console.log('匿名回調'));
this.$off('custom-event', () => console.log('匿名回調'));
this.handleEvent = () => console.log('具名回調');
this.$on('custom-event', this.handleEvent);
this.$off('custom-event', this.handleEvent);
若 $on 綁定了多個回調，$off('eventName', handler) 僅移除指定回調，其他回調仍有效；若需移除所有，需用 $off('eventName')。
Vue 組件卸載時，會自動移除所有通過 $on 綁定的事件監聽器，因此若僅需在組件銷毀時移除，無需手動調用 $off。但如果組件未銷毀（如隱藏而非銷毀），則需手動移除。
$on / $off 綁定的是組件實例的事件，而非 DOM 事件。若需移除 DOM 事件，仍需用 removeEventListener。
移除 $on 動態添加的事件監聽器，核心是：
- 用
$off 方法，參數與 $on 完全匹配（事件名 + 回調函數引用）；
- 避免使用匿名函數，改用具名函數確保引用一致；
- 組件卸載時 Vue 會自動清理，無需手動
$off（除非組件未銷毀）；
- 區分組件實例事件（
$on / $off）和 DOM 事件（addEventListener / removeEventListener）。
|
咨詢服務熱線：400-099-8848
