Vue.js 判断组件是否附加了事件侦听器

发布于10月12日

假设有大约<Form>个组件.可以使用@cancel事件监听器调用它，如果是这样，我想显示触发此事件的取消按钮.如果没有@cancel事件，取消按钮应该不可见.

有没有办法判断组件是否连接了事件侦听器？

目前我有:

<template>
  <form>
    <button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button>
  </form>
</template>

这样称呼:

<Form :cancelEventPassed="true" @cancel="handle_cancel" />

任何一个

<Form/>

有没有可能在不使用任何额外属性(如cancelEventPassed)的情况下实现这一点？

推荐答案

当有监听器连接到组件时，它们在组件的$listeners属性中可用.

您可以使用该属性来确定特定的侦听器是否可用.例如，这里有一个computed属性，用于判断是否存在cancel个侦听器.

computed:{
  hasCancelListener(){
    return this.$listeners && this.$listeners.cancel
  }
}

下面是一个在组件中使用的示例.

console.clear()

Vue.component("CustomForm", {
  template:`
    <div>
      <h1>Custom Form</h1>
      <button v-if="hasCancelListener" @click="$emit('cancel')">I have a listener!</button>
    </div>
  `,
  computed:{
    hasCancelListener(){
      return this.$listeners && this.$listeners.cancel
    }
  },
})

new Vue({
  el: "#app",
  methods:{
    onCancel(){
      alert('canceled')
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <custom-form @cancel="onCancel"></custom-form>
  <hr>
  <custom-form></custom-form>
</div>