vue3组件中如何中判断用户是否绑定了某个自定义方法？

Question

vue3组件中如何中判断用户是否绑定了某个自定义方法

组件调用：
<VDatepicker v-model="range" @query="() => {}" @click="() => {}"></VDatepicker>

VDatepicker 组件：

<script setup lang="ts">
const emit = defineEmits(['query'])
// 部分代码省略
</script>
<template>
  <!-- 如果绑定了 query 事件就显示查询按钮 -->
  <VButton v-if="$attrs.onQuery" color="primary" @click="emit('query')" raised>查询</VButton>
</template>

我要实现的功能大概就是如果绑定了 query 事件，就显示 查询 按钮，但实际测试发现，$attrs.onClick 是 true，$attrs.onQuery 是 false

<VButton v-if="$attrs.onClick">查询</VButton> // 显示
<VButton v-if="$attrs.onQuery">查询</VButton> // 不显示

这是为什么，怎么判断用户有没有绑 @query=""

---

测试发现，添加下这行 const emit = defineEmits(['query']) 会导至 $attrs['onQuery'] 为 false， 不知道为什么，也不知道怎么解决

Answer 1

可以通过useListeners来判断，useListeners可以获取到所有绑定的事件，代码如下

import { useListeners } from 'vue';
const listeners = useListeners();
console.log('是否绑定了query', 'query' in listeners);

Answer 2

Vue3组件中判断用户是否绑定了某个自定义方法
在Vue3中，我们可以通过几种方式来判断用户是否为组件绑定了自定义方法。这些方法主要包括检查组件的 $attrs 对象、使用 defineEmits 定义发射的事件等。下面我们将详细解释这些方法，并解答您提出的疑问。

使用 $attrs 对象判断绑定情况
在Vue3中，$attrs 对象包含了父组件传递给子组件的所有非 prop 属性。因此，我们可以通过检查 $attrs 对象中是否存在特定的事件监听器来判断用户是否绑定了某个自定义方法。例如，如果您想要检查用户是否绑定了 @query 事件，可以查看 $attrs 中是否存在 onQuery 键。

defineEmits 的作用
defineEmits 是 Vue3 提供的一个函数，用于在组件中定义可以发射的事件。当我们在组件中使用 defineEmits 定义了一系列事件后，Vue 会在组件的 $attrs 对象中过滤掉这些事件，因为它们已经被显式地定义过了。这就是为什么在您添加了 const emit = defineEmits(['query']) 后，$attrs['onQuery'] 变为了 false —— 因为 query 事件已经被定义，所以它不再存在于 $attrs 对象中。

解决方案
如果您希望在组件中既定义了 query 事件，又能通过 $attrs 对象来判断用户是否绑定了 @query，您可以采取以下措施：

1. 直接检查 $attrs
   在您的组件模板中，您可以直接使用 v-if="$attrs.onQuery" 来判断用户是否绑定了 @query 事件。
2. 使用 defineEmits 和 $listeners
   如果您需要在组件中定义一系列事件，并且希望保留对这些事件的访问，可以在定义事件的同时，也将这些事件添加到 $listeners 对象中。这样，即使事件被定义了，用户仍然可以通过 $listeners.onQuery 来访问 @query 事件。

综上所述，在Vue3组件中判断用户是否绑定了某个自定义方法，可以通过检查 $attrs 对象或使用 defineEmits 和 $listeners 的组合来实现。希望以上的解释和建议能够帮助您解决问题。

Answer 3

这是因为在 Vue 3 中，$attrs 对象不包含通过 defineEmits 定义的事件。$attrs 主要用于传递非 props 和非 emits 的属性。因此，$attrs.onQuery 不会被设置为 true。

<template>
  <VButton v-if="hasQueryEvent" color="primary" @click="emit('query')" raised>查询</VButton>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const emit = defineEmits(['query']);
const hasQueryEvent = ref(false);

onMounted(() => {
  hasQueryEvent.value = !!$attrs.onQuery;
});
</script>

Answer 4

参考：StackOverflow - Vue 3 check if emit is present

import { getCurrentInstance } from 'vue';

const thisInstance = getCurrentInstance();

const emit = defineEmits(['onBeforeAdd'])

if (thisInstance?.vnode?.props?.onBeforeAdd) {
  emit('onBeforeAdd') 
}

实测 defineEmits(["query"]) 会变成 props.onQuery