使用 v-on 对象语法传递事件修饰符

Question

根据 vue，我们可以将事件和处理程序作为对象传递（对插槽非常有用）。

脚本

computed: {
  on() {
    return {
      input: this.onInput,
      keyup: this.onEnter
    }
  }
}

模板

<template>
  <div>
    <slot name="mySlot" :on="on"></slot>
  </div>
<template>

所以在这个例子中，假设槽接受一个输入字段。在这种情况下，该输入字段将发出每个输入事件和按键事件。这两个事件都将被 'child component' 捕获，这是此处定义的事件，它声明了插槽。

但是，如果我们只是想获取 'enter' keyup 事件，则此语法似乎不起作用。

脚本

computed: {
  on() {
    return {
      input: this.onInput,
      'keyup.enter': this.onEnter
    }
  }
}

使用上面的方法，没有捕捉到keyup enter事件。任何人都知道如何协调这里的语法，以便可以捕获事件？

Answer 1

v-on 的对象语法不支持开箱即用的事件修饰符。对象键只能是 事件名称 ，因此使用 keyup.enter 会为不存在的 keyup.enter 事件（而不是 keyup 事件注册一个事件监听器).

一个解决方案是监听 keyup，并检查事件的 key for 'Enter':

export default {
  computed: {
    on() {
      return {
        keyup: e => {
          if (e.key === 'Enter') {
            this.onEnter(e)
          }
        }
      }
    }
  }
}

demo

使用 v-on 对象语法传递事件修饰符

Pass event modifiers with v-on object syntax

events

vue.js

vuejs2