如何访问 Svelte 3 组件中插槽的值？

Question

我一直在使用 Svelte 3。我正在尝试创建一个基本的 Link 组件，其使用方式如下：

<Link to="http://google.com">Google</Link>

我的组件呈现一个普通的 HTML<a>标签，在链接文本前面带有一个图标：

<script>
  export let to
  const imageURL = getFaviconFor(to)
</script>

<a href={to}>
  <img src={imageURL} alt={`${title} Icon`} />
  <slot />
</a>

title我在标签的 alt 属性中显示的变量需要<img>是未命名槽的文本值。这是一个非常基本的示例，但是有什么方法可以获取这样的插槽的值吗？

Answer 1

与此同时，我找到了另一种（更好而且不那么老套的）方法：

<script>
  export let to
  let slotObj;
  const imageURL = getFaviconFor(to)
</script>

<a href={to}>
  <img src={imageURL} alt={slotObj? slotObj.textContent + ' Icon' : 'Icon'} />
  <span bind:this={slotObj}><slot/></span>
</a>

Answer 2

这个黑客将会起作用。

添加隐藏的 span 或 div 来绑定槽文本：

<span contenteditable="true" bind:textContent={text} class="hide"> 
    <slot/>
</span>

并像这样更新你的代码：

<script>
  export let to
  let text;
  const imageURL = getFaviconFor(to)
</script>

<a href={to}>
  <img src={imageURL} alt={text + ' Icon'} />
  {text}
</a>