[Vue2]判断引用组件是否注册了 $emit 对应的事件

Vue2判断引用组件是否注册了 $emit 对应的事件

使用 $listeners 属性

Vue 2 提供了 $listeners 属性，它是一个对象，包含了父组件传递给子组件的所有事件监听器。你可以通过检查 $listeners 来判断是否注册了特定的事件。

示例代码

<template>
  <div>
    <button @click="checkEvent">Check Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    checkEvent() {
      // 检查是否注册了特定的事件
      if (this.$listeners.myEvent) {
        console.log("父组件注册了 myEvent 事件");
        this.$emit("myEvent");
      } else {
        console.log("父组件没有注册 myEvent 事件");
      }
    }
  }
};
</script>

父组件

<template>
  <div>
    <my-component @myEvent="handleMyEvent" />
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    MyComponent
  },
  methods: {
    handleMyEvent() {
      console.log("myEvent 被触发");
    }
  }
};
</script>

在这个例子中，子组件通过 $listeners.myEvent 来判断父组件是否注册了 myEvent 事件。

注意事项

• $listeners 是 Vue 2.4.0 之后引入的特性，确保你的 Vue 版本不低于 2.4.0。
• 如果你使用的是 Vue 3，可以使用 v-model 的动态绑定和事件监听，Vue 3 对事件和属性的处理方式有所不同。

通过 $listeners，你可以很方便地在子组件内部判断父组件是否注册了特定的事件，从而根据需要执行不同的逻辑。