如何获得Svelte组件中的插槽值?

Question

假设我创建了一个名为component的组件，我像这样命名它。

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

在组件内部，我可以使用<slot></slot>在html中显示该文本。我如何在脚本部分引用它的值?是否存在一个存储它的变量?

Answer 1

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

在你的组件中，将slots包装成span，并使用bind:this绑定元素

在Component.svelte

<script>
let data;
$: console.log(data?.innerHTML)
$: console.log(data?.innerText)
</script>
<span bind:this={data}><slot></slot></span>

你可以在这个repl

中检查它

Answer 2

下面我给出了一个带有命名槽的例子，也是未命名的->

在Slot.svelte

<script>
let content ='lorem'
</script>

<slot name='named-slot' >
{content}
</slot>

在父组件

<script>
import Data from './Slot.svelte'
let newData=' new content'
</script>

<Data>  
<svelte:fragment slot='named-slot' let:newData={content}>
{newData} 
</svelte:fragment>
</Data>

和未命名槽的示例->

在Slot.svelte

<script>
let content ='lorem'
</script>

<slot  >
{content}
</slot>

在父组件

<script>
import Data from './Slot.svelte'
let newData=' new content'
</script>


<Data let:newData={content}> 
{newData}
</Data>