1

I would like to add a ref='foo' to the <ais-search-box> element (to the rendered input field), so I can then dynamically put .focus on it if needed. But how can I add the ref=[..]? My current code is:

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

But this is not working, the final rendered element does not contain any ref= info:

<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>
4

1 回答 1

0

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

父.vue

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

孩子.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();

于 2020-08-02T19:48:19.373 回答