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

【问题标题】：How do I access the value of a slot in a Svelte 3 component?如何访问 Svelte 3 组件中插槽的值？
【发布时间】：2019-09-29 23:23:13
【问题描述】：

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

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

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

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

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

我在<img> 标记的alt 属性中显示的title 变量必须是未命名槽的文本值。这是一个非常基本的示例，但是有没有办法像这样获取插槽的值？

【问题讨论】：

只使用 title 属性，与 "to" 属性相同，而不是 slot。
我明白，但这只是一种解决方法。链接不是这样工作的，这也不是唯一可以访问组件的子级的时候。
这不是一种解决方法，插槽创建了一个数据通道，您可以通过该通道将内容发送到插槽上下文中，这不是一个简单的属性。您将不得不利用一些纤细的内部结构来读取插槽上下文数据。尝试在svelte.dev/repl 中创建一个槽，并查看 JS 输出，通道是如何编译的。

标签： javascript svelte

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

【讨论】：

这不会对 textContent 修改产生反应。
2001年怎么做？

【解决方案2】：

这个 hack 会起作用。

添加隐藏的 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>

【讨论】：