如何移除通過$emit觸發(fā)的事件監(jiān)聽器？

發(fā)布時(shí)間：2025-11-09 文章來源：本站瀏覽次數(shù)：454

在 Vue 中，$emit 用于觸發(fā)事件，而事件監(jiān)聽器是通過 $on 或 v-on (@) 綁定的。要移除由 $emit 觸發(fā)的事件監(jiān)聽器，核心是移除對應(yīng)的事件綁定，而非直接操作 $emit。以下是具體實(shí)現(xiàn)方法及場景說明：

一、核心概念澄清

$emit：觸發(fā)組件實(shí)例上的事件，通知父組件或其他監(jiān)聽者。
事件監(jiān)聽器：通過 $on 或 v-on 綁定的回調(diào)函數(shù)，用于響應(yīng)事件。
移除監(jiān)聽器：需針對綁定方式，使用 $off 或銷毀組件來移除。

二、移除通過 `$on` 綁定的事件監(jiān)聽器

如果事件是通過 $on 動(dòng)態(tài)綁定的，使用 $off 移除。

1. 移除指定事件的指定回調(diào)

javascript

運(yùn)行

export default {
  created() {
    this.handleClick = () => {
      console.log('事件觸發(fā)');
    };
    this.$on('custom-event', this.handleClick); // 綁定
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event'); // 觸發(fā)事件
    },
    removeListener() {
      this.$off('custom-event', this.handleClick); // 移除指定回調(diào)
    }
  }
};

2. 移除指定事件的所有回調(diào)

javascript

運(yùn)行

this.$off('custom-event'); // 移除該事件的所有監(jiān)聽器

3. 移除組件的所有事件監(jiān)聽器

javascript

運(yùn)行

this.$off(); // 移除組件上所有通過 $on 綁定的事件

三、移除通過 `v-on` (`@`) 綁定的事件監(jiān)聽器

如果事件是通過模板 @eventName 綁定的，有兩種方式移除：

1. 銷毀組件（徹底）

通過 v-if 控制組件銷毀，Vue 會(huì)自動(dòng)清理所有 v-on 綁定的事件。

vue

<!-- 父組件 -->
<template>
  <ChildComponent v-if="showChild" @custom-event="handleEvent" />
  <button @click="showChild = false">銷毀子組件</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const showChild = ref(true);
const handleEvent = () => console.log('事件觸發(fā)');
</script>

2. 動(dòng)態(tài)解綁（不銷毀組件）

通過重新渲染組件實(shí)現(xiàn)事件解綁。

vue

<template>
  <ChildComponent 
    :key="componentKey" 
    @custom-event="handleEvent" 
  />
  <button @click="componentKey += 1">解綁事件</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const componentKey = ref(0);
const handleEvent = () => console.log('事件觸發(fā)');
</script>

當(dāng) componentKey 變化時(shí)，組件會(huì)重新創(chuàng)建，舊的事件綁定會(huì)被銷毀。

四、常見場景示例

場景 1：子組件觸發(fā)事件，父組件移除監(jiān)聽

vue

<!-- 父組件 -->
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const handleChildEvent = (data) => {
  console.log('收到子組件事件:', data);
};
</script>

<!-- 子組件 ChildComponent.vue -->
<script setup>
import { emit } from 'vue';
const emit = defineEmits(['child-event']);

// 觸發(fā)事件
const trigger = () => {
  emit('child-event', 'hello');
};
</script>

父組件如需移除監(jiān)聽，可通過銷毀子組件（v-if）或重新渲染（key）實(shí)現(xiàn)。

場景 2：動(dòng)態(tài)添加 / 移除事件監(jiān)聽

vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const myComponent = ref(null);
let count = 0;

// 定義事件處理函數(shù)
const handleCustomEvent = () => {
  count++;
  console.log('事件觸發(fā)次數(shù):', count);
};

onMounted(() => {
  // 動(dòng)態(tài)綁定事件
  myComponent.value.$on('custom-event', handleCustomEvent);
});

onUnmounted(() => {
  // 移除事件監(jiān)聽
  myComponent.value.$off('custom-event', handleCustomEvent);
});
</script>

五、避坑指南

$emit 是觸發(fā)事件，不是綁定事件，無法直接移除 $emit，只能移除對應(yīng)的監(jiān)聽器。
若通過 v-on 綁定事件，Vue 會(huì)在組件銷毀時(shí)自動(dòng)移除，無需手動(dòng)操作。
若事件是通過 $on 動(dòng)態(tài)綁定的，必須用 $off 手動(dòng)移除，否則可能導(dǎo)致內(nèi)存泄漏。
確保 $off 的參數(shù)（事件名、回調(diào)函數(shù)）與 $on 完全一致，否則移除無效。

總結(jié)

綁定方式	移除方式	說明
`$on('event', handler)`	`$off('event', handler)`	移除指定事件的指定回調(diào)
`$on('event', handler)`	`$off('event')`	移除指定事件的所有回調(diào)
`v-on:event="handler"`	銷毀組件（`v-if`）	自動(dòng)移除所有 `v-on` 綁定的事件
`v-on:event="handler"`	重新渲染（`key` 變化）	舊組件銷毀，事件綁定失效

通過以上方法，可以有效移除由 $emit 觸發(fā)的事件監(jiān)聽器，避免內(nèi)存泄漏和不必要的事件響應(yīng)。

上一條：如何在 Vue 中移除原...

下一條：在Vue中，如何移除一個(gè)...