Vue-InstantSearch (Algolia)：如何将 ref= 添加到输入字段？

Question

我想将ref='foo' 添加到<ais-search-box> 元素（到呈现的输入字段），这样我就可以在需要时动态地将.focus 放在它上面。但是如何添加ref=[..]？我当前的代码是：

<ais-search-box ref="foo">
    <div slot="submit-icon"><i class="fas fa-search text-xl p-2 text-blue-400"></i></div>
</ais-search-box>

但这不起作用，最终渲染的元素不包含任何ref=信息：

<form action="" role="search" novalidate="novalidate" class="ais-SearchBox-form">
   <input type="search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" required="required" maxlength="512" aria-label="Search" autofocus="autofocus" class="ais-SearchBox-input"> <button type="submit" title="Search" class="ais-SearchBox-submit">
    <div><i class="fas fa-search text-xl p-2 text-blue-400"></i></div></button> 
    <button type="reset" title="Clear" class="ais-SearchBox-reset" hidden="hidden">
    <svg role="img" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" class="ais-SearchBox-resetIcon"><path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fillRule="evenodd"></path></svg>
   </button> <!---->
</form>

Answer 1

在父组件中，将ref 保留在子组件上。

父.vue

<ais-search-box ref="foo">
.....
</ais-search-box>

Child.vue

<form action="" ......>
   <input type="search" class="ais-SearchBox-input".. ref="childInput"> // add ref to the input field in the child component that you want to access
   .......
</form>

从子组件访问子组件中的输入并将焦点放在它上面：

this.$refs.childInput.focus();

从父组件访问子组件中的输入并将焦点放在它上面：

this.$refs.foo.$refs.childInput.focus();