如何在Svelte组件中获取插槽值？

本文介绍了如何在Svelte组件中获取插槽值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

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

推荐答案

若要获取槽内容，您需要应用技巧。

在组件中，将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

中查看