javascript - 除了@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 之外的所有事件？

这是 code sandbox .

Answer 1

您可以创建一个 $listeners 的副本(通过将其传播到一个新对象中)，并覆盖 click:

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

demo 1

或者创建一个computed prop排除任何 click 事件处理程序:

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

然后将该 Prop 绑定(bind)到 v-on 代替 $listeners:

<a v-on="myListeners">

demo 2