假设有<Form>
组件。它可以通过附加一个@cancel
事件侦听器调用,如果是这样的话,我想显示触发该事件的取消按钮。如果没有@cancel
事件,取消按钮应不可见。
是否有一种方法可以检查组件是否附加了事件侦听器?
目前我做:
<template>
<form>
<button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button>
</form>
</template>
然后这样称呼它:
<Form :cancelEventPassed="true" @cancel="handle_cancel" />
要么
<Form/>
是否可以不使用任何额外的属性,如cancelEventPassed
?
6条答案
按热度按时间nhn9ugyo1#
当有侦听器附加到组件时,它们在组件的
$listeners
属性中可用。可以使用该属性确定特定侦听器是否可用。例如,这里有一个计算属性,用于检查
cancel
侦听器是否存在。下面是一个组件中使用的例子。
jmo0nnb32#
在Vue 3中,
$listeners
对象被删除了。侦听器现在是$attrs
对象的一部分,前缀为on
。为了检查子组件中是否存在特定侦听器,您可以执行以下操作:
子组件称为:
34gzjxbg3#
Vue3示例
说明
Vue 3删除了
$listeners
对象,而不是监听器将与$attrs
对象分开,前缀为on..
。参考
https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html#overview
ibps3vxo4#
因为@prerak-sola的解决方案不起作用,如果你这样定义发射(如Adam Reis所示):
我发现,由于vue将所有props转换为一个对象,并在每个event-name前添加前缀
on
,所以你只需检查vnode
中是否定义了属性(事件监听器):然而,我在官方文档中找不到任何关于这一点的信息(这比使用
useAttrs
要困难得多)。所以要谨慎使用。csbfibhn5#
你可以像这样检查监听器是否存在:
this._events['listener-name']
krcsximq6#
如果您正在寻找Vue 3
script setup
或setup function
解决方案,您可以在getCurrentInstance
函数中检查attrs
键