是否有一种方便的方法可以在 Svelte 组件中引用 DOM 元素？

Question

我习惯了像 React 或 Angular 这样的库/框架，它们都有方便的方法来访问属于逻辑组件的实际 DOM 元素。React 具有createRef实用程序，而 Angular 具有与例如结合的模板变量。@ViewChild.

这些引用不仅使访问 DOM 变得容易，而无需每次都明确查询元素，而且它们还与 DOM 保持同步，以便它们始终保持对当前元素的引用。我刚开始在我的宠物项目中使用 Svelte，但尽管我浏览了 Svelte 的文档和谷歌很多，但我没有找到任何类似的概念和用法。我想这可能与 Svelte 的无运行时概念有关，但仍然不知道为什么没有这样的实用程序。

那么问题来了，Svelte 中是否有类似的实用程序？

Answer 1

根据https://svelte.dev/tutorial/bind-this上的示例（感谢@skyboyer），您可以使用bind:this（在 REPL 中尝试）：<script>&nbsp; &nbsp; import { onMount } from 'svelte';&nbsp; &nbsp; let myInput;&nbsp; &nbsp; onMount(() => {&nbsp; &nbsp; &nbsp; &nbsp; myInput.value = 'Hello world!';&nbsp; &nbsp; });</script><input type="text" bind:this={myInput}/>您也可以使用use:action，如https://svelte.dev/docs#use_action和@collardeau 所建议的（在 REPL 中尝试）：<script>&nbsp; &nbsp; import { onMount } from 'svelte';&nbsp; &nbsp; let myInput;&nbsp; &nbsp; function MyInput (node) {&nbsp; &nbsp; &nbsp; &nbsp; myInput = node;&nbsp; &nbsp; &nbsp; &nbsp; myInput.value = 'Hello world!';&nbsp; &nbsp; }</script><input type="text" use:MyInput/>