javascript - 在 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 ( try in REPL ):

<script>
    import { onMount } from 'svelte';

    let myInput;

    onMount(() => {
        myInput.value = 'Hello world!';
    });
</script>

<input type="text" bind:this={myInput}/>

您还可以使用 use:action，如 https://svelte.dev/docs#template-syntax-element-directives-use-action 所示并由@collardeau(try in REPL)建议:

<script>
    import { onMount } from 'svelte';

    let myInput;

    function MyInput (node) {
        myInput = node;
        myInput.value = 'Hello world!';
    }
</script>

<input type="text" use:MyInput/>