有没有一种方便的方法来引用 Svelte 组件中的 DOM 元素？

Posted 2023-02-19

【中文标题】有没有一种方便的方法来引用 Svelte 组件中的 DOM 元素？

【英文标题】：Is there a convenient way to reference a DOM element in Svelte components?

【发布时间】：2020-02-10 05:44:14

【问题描述】：

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

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

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

【问题讨论】：

@skyboyer 我认为您粘贴了错误的 URL。我猜应该是这个：svelte.dev/tutorial/bind-this

是的，这正是我想要的。谢谢你们！

我认为use:action 是你所追求的svelte.dev/docs#use_action

【参考方案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/>

【讨论】：

@SuperUberDuper 没错，但是通过使用 Svelte 的绑定（特别是当您不需要访问 DOM 元素，只需访问值，例如 bind:value=myInputValue），您将获得双向值更改，而无需必须自己实现它们。编译器会为您保证它们是最新的。

两者都很漂亮;)