如何在Vue子组件中使用$ refs转移焦点？

Question

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

HTML

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

JS

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

当输入字段与v-for处于同一组件时，它可以正常工作。但是，当我将输入字段和代码移动到子组件时，我得到的错误是“ this。$ refs [（“ inputField” +（1 + index））]未定义”

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

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

有人会知道如何解决这个问题，以便我也可以将焦点转移到子组件的输入字段中吗？

Answer 1

每个组件都有其自己的$refs属性，子组件无法访问父组件$refs。

我有一个建议的解决方案。在大型项目中，它可能不被视为非常干净的代码，具体取决于您：

如果您希望所有组件共享相同的$refs，则可以全局注册它们：

在父组件中：

mounted(){
   global.$refs = this.$refs
}

然后您可以通过global.$refs访问子组件中的那些引用。

任何其他想要共享其$refs的组件也可以将它们添加到全局引用中：

 mounted(){
        global.$refs=Object.assign(global.$refs,this.$refs);
    },

（请注意裁判名称中的重复内容，新裁判将覆盖其他裁判）

Answer 2

注释中ljubadr的回答很奏效。基本上将ref移至父级，然后移至this.$refs["inputField" + (1 + index)][0].$el.focus()：

您可以尝试使用this之类的方法。按下时，组件将向父对象发出事件，而父对象将关注下一个组件