Question

我习惯于像React或Angular这样的库/框架，它们都具有便捷的方法来访问属于逻辑组件的实际DOM元素。 React具有createRef实用程序，而Angular除其他功能外还具有模板变量，例如。 @ViewChild。

这些引用不仅可以轻松访问DOM，而无需每次都显式查询元素，它们还可以与DOM保持同步，从而始终保留对当前元素的引用。我刚开始使用Svelte从事我的宠物项目，但是尽管我仔细阅读了Svelte的文档和google，但在概念和用法上却没有发现任何相似之处。我想这可能与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#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/>

在Svelte组件中是否有引用DOM元素的便捷方法？

1 个答案: