获取 Svelte 中组件根元素的引用

Question

我知道我可以使用以下方法获取对 DOM 元素的引用bind:this：

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

  let root;

  onMount(() => {
    // root is div
  });
</script>

<div bind:this="{root}">
  content
</div>

如何获取组件根元素的 DOM 节点的引用？

Wrapper.svelte:
<div class="root">
  <slot />
</div>

App.svelte:
<script>
  import { onMount } from "svelte";

  let root;

  onMount(() => {
    // root is not div :(
  });
</script>

<Wrapper bind:this="{root}">
  content
</Wrapper>

Answer 1

Svelte 不强制使用根组件。

<p>I am valid component.</p>
<p>With multiple roots.<p>

<script>
  console.log('No root is valid too')
</script>

因此，没有快捷语法来获取根元素，您需要手动“代理”要公开的元素：

Wrapper.svelte

<script>
  export let root
</script>

<div bind:this={root}>...</div>

App.svelte

<script>
  import Wrapper from './Wrapper.svelte'
  let el
</script>

<Wrapper bind:root={el} />

使用一些奇特的 JS 语法，bind:this如果您愿意，您还可以复制该语法：

Wrapper.svelte

<script>
  let root
  export { root as this }
</script>

<div bind:this={root} />

App.svelte

<script>
  import Wrapper from './Wrapper.svelte'
  let root
</script>

<Wrapper bind:this={root} />