Question

我一直在玩Svelte3。我正在尝试创建一个基本的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

此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>

Answer 2

与此同时，我发现了另一种方法（甚至更好，但不是那么笨拙）：

<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>

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

2 个答案: