svelte - 如何获取 Svelte 组件中的插槽值？

Question

假设我创建了一个名为 Component 的组件，我这样调用它。

<Component>This text goes in the slot</Component>

组件内部 I can use <slot></slot> to display that text in the html .如何在脚本部分引用它的值？是否有存储它的变量？

Answer 1

要获取插槽内容，您需要应用一个技巧。

在您的组件中，将 slots 包装到 span 中，并使用 bind:this 绑定(bind)元素

在 Component.svelte 中

<script>
    let data;
    $: console.log(data?.innerHTML)
    $: console.log(data?.innerText)
</script>

<span bind:this={data}><slot></slot></span>

你可以在这个repl中查看