有没有一种方便的方法可以在 Svelte 组件中引用 DOM 元素?
Is there a convenient way to reference a DOM element in Svelte components?
我习惯了 libs/frameworks,比如 React 或 Angular,它们都有方便的方法来访问属于逻辑组件的实际 DOM 元素。 React 具有 createRef
实用程序,Angular 具有模板变量与 eg 组合等功能。 @ViewChild
。
这些引用不仅可以轻松访问 DOM 而无需每次都显式查询元素,它们还与 DOM 保持同步,因此它们始终保持对当前元素的引用元素。我刚开始为我的宠物项目使用 Svelte,但尽管我浏览了 Svelte 的文档并 google 很多,但我没有发现任何在概念和用法上相似的东西。我想这可能与 Svelte 的无运行时概念有关,但仍然不知道为什么没有这样的实用程序。
所以问题是,Svelte 中是否有类似的实用程序?
基于 https://svelte.dev/tutorial/bind-this (thanks to @skyboyer), you can use 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 and suggested by @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/>
我习惯了 libs/frameworks,比如 React 或 Angular,它们都有方便的方法来访问属于逻辑组件的实际 DOM 元素。 React 具有 createRef
实用程序,Angular 具有模板变量与 eg 组合等功能。 @ViewChild
。
这些引用不仅可以轻松访问 DOM 而无需每次都显式查询元素,它们还与 DOM 保持同步,因此它们始终保持对当前元素的引用元素。我刚开始为我的宠物项目使用 Svelte,但尽管我浏览了 Svelte 的文档并 google 很多,但我没有发现任何在概念和用法上相似的东西。我想这可能与 Svelte 的无运行时概念有关,但仍然不知道为什么没有这样的实用程序。
所以问题是,Svelte 中是否有类似的实用程序?
基于 https://svelte.dev/tutorial/bind-this (thanks to @skyboyer), you can use 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 and suggested by @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/>