专注于位于 vuejs 中另一个组件内的输入？答案

【问题标题】：focus on an input that is located inside another component in vuejs?专注于位于 vuejs 中另一个组件内的输入？
【发布时间】：2022-01-07 04:12:48
【问题描述】：

我希望在输入某些键时能够专注于输入字段。我想关注的输入存在于 autocomplete-vue 中。这就是我所说的：

<autocomplete v-shortkey="['alt', 's']"
              @shortkey.native="theAction()"
              ref="autocompleteInput" 
></autocomplete>

我想让我专注于输入的Action方法，如下所示：

theAction () {
      this.$refs.autocompleteInput.$el.focus()
    }

这不是我想要的，而是关注整个部分。输入在 theAction 关注的内容中存在 2 个 div。从更好的角度来看，这就是 this.$refs.autocompleteInput.$el 返回的内容：

<div>
  <div data-position="below" class="autocomplete"> 
     <input role="combobox" class="autocomplete-input"> 
  </div>
</div>

关于如何使用自动完成输入类专注于输入的任何想法？任何建议都有帮助！

【问题讨论】：

【解决方案1】：

在autocomplete 组件中为<input> 添加一个引用并添加一个方法来聚焦它

<input role="combobox" class="autocomplete-input" ref="input">

methods: {
  focus() {
    this.$refs.input.focus()
  }
}

然后你可以像这样从父组件调用它

this.$refs.autocompleteInput.focus()

【讨论】：