javascript - 组件父级的键修饰符

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
        }
      }
    })
  }

这将在窗口级别添加一个事件监听器，它将监听任何东西上按下的Tab键。但是，目标元素会与当前元素进行递归比较。显然，这并不理想，因为使用 $emit 的开销比循环任何元素的父元素要低，这就是为什么清除此监听器很重要。