组件父级上的键修饰符

Question

是否可以在不访问子组件的情况下记录组件的Tab事件？

例如：

在父母中：

<inputcomponent
    label="mylabel"
    placeholder="myplaceholder "
    v-on:keydown.tab="keydown($event)"    <---
    >
</inputcomponent>

我已从库中下载了自动完成组件，因此我想找到一种方法来记录“ tab”事件而无需更改组件，但要更改父组件。

有可能吗？

Answer 1

这取决于组件。如果未将组件设置为发出侦听器，则您将无法以这种方式侦听事件。

如果您不能编辑组件本身，则可以通过在挂载期间添加自定义事件侦听器（并在删除时清除它们）来解决它

这是一个假设的示例： -您有一个模板中带有ref="componentA"的组件 -您有一个名为onTab的函数 -您使用适当的事件生命周期清除监听器

  mounted () {
    window.addEventListener('keydown', (e) => {
      if (e.key === 'Tab'){
        var el = e.target;
        while (el) {
          if (el === this.$refs.componentA) {
            // do my action
            return this.onTab();
          }
          el = el.parentElement
        }
      }
    })
  }

这将在window级别添加一个事件侦听器，该侦听器将侦听在任何内容上按下的Tab键。但是，将目标元素与当前元素进行递归比较。显然，这是不理想的，因为使用$emit的开销比循环遍历任何元素的父对象的开销低，这就是为什么清除此侦听器很重要的原因。