除了@click，我如何使用 v-on="$listeners"？

Question

我有一个Button.vue这样的。我正在使用v-on="$listeners"将所有侦听器传递给<a>.

<template>
    <a
        v-bind="$attrs"
        v-on="$listeners"
        class="Button"
        href="javascript: void(0)"
        :class="{ disabled }"
        @click="onClick()"
    >
        <slot></slot>
    </a>
</template>

<script>
    export default {
        props: {
            disabled: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onClick() {
                if (!this.disabled) {
                    this.$emit('click');
                }
            }
        },
    };
</script>

但是在传播@click事件之前我需要进行自定义检查，因此我还定义了@click. 但是，当我同时定义v-on="$listeners"并@click="onClick()"在同一时间，该onClickDelete函数被调用两次。我也试过了@click.prevent，还是不行。

<Button @click="onClickDelete">Delete</Button>

有没有一种方法可以v-on="$listeners"为除 之外的所有事件定义@click？

这是代码沙箱。

Answer 1

您可以创建一个副本$listeners（通过将其传播到一个新对象中），并覆盖click：

<a v-on="{ ...$listeners, click: () => {} }">

演示 1

或者创建一个排除任何事件处理程序的计算道具click：

export default {
  computed: {
    myListeners() {
      const { click, ...listeners } = this.$listeners // exclude `click`-listener
      return listeners
    },
  },
}

然后将该道具绑定到v-on代替$listeners：

<a v-on="myListeners">

演示 2