如何在Svelte组件中获取slot插槽的内容值？

Svelte 没有内置专门的全局变量存储插槽内容，你可以根据场景选择以下两种常用方案实现需求： #

方案1：通过 slot 标签的 slotchange 事件获取（通用方案） #

直接给组件内的 <slot> 标签绑定事件，监听插槽内容变化后读取插槽内的节点，适合所有插槽场景，尤其是插槽内容动态变化、或者传入的是DOM/组件的情况：

<!-- Component.svelte 组件内代码 -->
<script>
  let slotText = ''
  function onSlotUpdate(e) {
    // 获取插槽内所有分配的DOM节点
    const nodes = e.target.assignedNodes()
    // 如果你需要纯文本内容，直接拼接所有节点的文本
    slotText = nodes.map(item => item.textContent).join('')
    // 拿到内容后可以直接在script里做后续逻辑处理
    console.log('当前插槽内容：', slotText)
  }
</script>

<slot on:slotchange={onSlotUpdate}></slot>

如果是具名插槽，给对应具名的 <slot name="xxx"> 标签绑定该事件即可拿到对应插槽的内容。 #

方案2：将插槽内容同步作为 props 传入（更简单的可控场景） #

如果上层调用组件时，插槽内容本身就是你维护的变量，可以直接把变量同时作为 props 传给组件，无需额外监听事件：

上层调用代码 #

<script>
  import Component from './Component.svelte'
  const passText = 'This text goes in the slot'
</script>

<!-- 同时传props和插槽内容 -->
<Component content={passText}>{passText}</Component>

组件内代码 #

<script>
  // 直接接收props即可拿到插槽对应的内容
  export let content = ''
  console.log('插槽内容：', content)
</script>

<slot></slot>

该方案性能更高、逻辑更可控，适合插槽内容本身来自上层变量的场景。

内容的提问来源于stack exchange，提问作者JSNinja