有没有一种方法可以在不使用 Svelte 中的组件道具的情况下获取文本

Question

所以，我只是想为自己制作一个简单的按钮组件。然后我想添加一个标签组件来标记按钮。有没有办法像这样抓取组件标签内的文本，然后将其作为变量传递？

<Button>
    <Label>Is there a way to grab this text?</Label>
</Button>

Answer 1

您可能需要 slots.

有了插槽，您可以这样定义 Label：

Label.svelte

<label>
  <slot />
</label>

... 并像您的示例一样使用它：

<script>
  import Label from './Label.svelte'
</script>

<Label>Some text</Label>

不过，您不能通过变量直接访问插槽的内容。

如果您确实需要在变量中使用它，那么您需要使用一些技巧。就像在 DOM 元素（不是组件）上有一个 bind:this={el} ，并使用正常的 DOM API 来读取内容（例如 el.innerHTML、el.textContent 等）。

Is there a way to grab a text without using component props in Svelte