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

参考：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

Answer 2

这是因为在 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 3

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 4

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

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

Answer 5

### 回答

在 Vue 3 中，判断用户是否在组件上绑定了某个自定义方法（例如 `@query`），可以通过检查组件实例的 `$attrs` 对象来实现。然而，需要注意的是，`$attrs` 包含了父作用域中非 prop 特性 (class 和 style 除外)，它并不会直接包含事件监听器。事件监听器是通过组件实例的 `$listeners` 对象（Vue 2）或 `$attrs` 中以 `on` 开头的属性（Vue 3 在 `v-bind="$attrs"` 时会包含这些事件监听器）来传递的。

在你的例子中，`<VDatepicker v-model="range" @query="() => {}" @click="() => {}"></VDatepicker>`，组件 `VDatepicker` 接收到的 `$attrs` 会包含 `onQuery` 和 `onClick` 属性，因为它们是作为 HTML 属性传递的。

然而，在你的 `VDateRangepicker` 组件内部，你试图通过 `$attrs.onClick` 和 `$attrs.onQuery` 来判断事件监听器的存在，这里有一个重要的点需要注意：

- `v-if="$attrs.onClick"` 能够正确工作，因为你在父组件中确实绑定了 `@click` 事件。
- `v-if="$attrs.onQuery"` 理论上也应该工作，除非在 `VDatepicker` 或其内部处理中有什么逻辑导致了 `onQuery` 被移除或未正确传递。

关于你提到的 `const emit = defineEmits(['query'])` 导致 `$attrs['onQuery']` 为 `false` 的问题，这是因为在 Vue 3 中，通过 `defineEmits` 明确声明了组件可以触发的事件后，这些事件就不再通过 `$attrs` 传递了。这是因为 Vue 3 提供了更明确的 API 来处理组件间的通信，通过 `defineEmits` 声明的事件应该直接通过 `this.$emit('query')` 来触发，而不是依赖于 `$attrs`。

**解决方案**：

1. **检查事件传递**：确保 `VDatepicker` 组件正确地传递了所有 `$attrs` 到其子组件，如果你使用了 `v-bind="$attrs"`，它应该包含所有事件监听器。

2. **使用 `$emit` 触发事件**：在 `VDatepicker` 组件内部，如果需要触发 `query` 事件，使用 `this.$emit('query')`。

3. **判断事件监听器**：在 `VDateRangepicker` 中，如果你确实需要判断某个事件监听器是否存在，你可以考虑使用 `this.$emit` 触发一个测试事件，并捕获父组件的响应，但这通常不是推荐的做法，因为它违反了 Vue 的事件驱动模型。

4. **直接通过 props 传递**：如果逻辑允许，考虑通过 props 而不是事件监听器来传递必要的配置或状态。