如何从苗条组件中获取元素绑定答案

【问题标题】：How to get an Element bind from a svelte component如何从苗条组件中获取元素绑定
【发布时间】：2020-10-03 19:19:21
【问题描述】：

我需要一个锚元素的边界客户端矩形。

我用bind:this={someVariable}标记它

但是当我将该代码添加到一个苗条组件时，我得到了一些其他苗条用来表示组件的对象。

我可以从该绑定中访问封闭的元素或类似的东西吗？还是我必须用牺牲的<div /> 包装每个组件并绑定它？

【问题讨论】：

【解决方案1】：

使用bind:this 不会给你一个DOM 元素，因为Svelte 不要求你的组件有一个根元素。这是一个有效的 Svelte 元素：

<script>
 ...
</script>
<div>...</div>
<div>...</div>

一个完全没有任何标记的组件也是如此：

<script>
 ...
</script>

在这两种情况下，不可能为这些组件返回一个有界客户端矩形，因为没有“根”元素。

也就是说，你可以在你的组件中添加一个bind:this 并导出它：

<script>
  export let anchor
</script>

<svelte:options accessors></scelte:options>
<a bind:this={anchor}>...</a>

在你的父母中，你现在可以使用child.anchor 获取锚元素（请注意，默认情况下，道具无法通过这种方式访问，这就是你需要 svelte:options 的原因）

这不是那么简单的原因之一是它是一种非常“不成熟”的工作方式，您通常不会直接与另一个组件（即该组件的域）生成的标记进行交互。

替代品可以是

【讨论】：