如何在 vue 子组件中使用 $refs 来转移焦点？答案

【问题标题】：How to use $refs in vue child component to shift focus?如何在 vue 子组件中使用 $refs 来转移焦点？
【发布时间】：2019-03-05 19:37:44
【问题描述】：

我正在使用此代码在 v-for 列表中的文本输入之间转移焦点：

HTML

<input :ref="'inputField' + index" @keydown.down="movedown(index)" type="text"
enter code here`v-model="todo.text">

movedown: function(index){
 this.$nextTick(() =>
    this.$refs["inputField" + (1 + index)][0].focus()
  );
}

当输入字段与 v-for 位于同一组件中时，它可以正常工作。但是，当我将输入字段和代码移动到子组件时，我得到一个错误“this.$refs[("inputField" + (1 + index))] is undefined” .

这是一个有效的 JSFiddle，您可以在其中使用向下箭头向下移动输入：https://jsfiddle.net/Gnopps/w5xqa1r9/

这是相同的代码，但在子组件中，您不能再向下移动：https://jsfiddle.net/Gnopps/y17en6o4/

有没有人知道我该如何解决这个问题，以便我也可以通过子组件中的输入字段来转移焦点？

【问题讨论】：

你可以试试like this。当你按下时，组件会向父组件发出事件，父组件会聚焦下一个组件。
您收到该错误是因为组件并非都共享相同的 $refs 对象。他们每个人都有自己的$refs 对象，该对象由您在其模板中使用ref 属性标记的任何内容填充。因此，您将0 作为index 属性传递给第一个子组件，然后当movedown 方法触发时，它会尝试访问this.$refs["inputField1"][0]，它不存在，因为您为该组件定义的唯一引用是this.$refs["inputField0"]。
太好了，谢谢@ljubadr

【解决方案1】：

ljubadr 在 cmets 中的回答非常完美。基本上将 ref 移动到父级，然后 this.$refs["inputField" + (1 + index)][0].$el.focus():

您可以尝试this 之类的方法。当你按下时，组件会向父组件发出事件，父组件会聚焦下一个组件

【讨论】：