有没有办法在 Svelte 中不使用组件道具来获取文本

【问题标题】：Is there a way to grab a text without using component props in Svelte有没有办法在 Svelte 中不使用组件道具来获取文本
【发布时间】：2020-09-30 14:12:11
【问题描述】：

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

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

【问题讨论】：

标签： svelte

【解决方案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 等）。

【讨论】：

谢谢。我只记得插槽存在。