假设有一些< 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:{
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>
