Svelte 中如何像 Vue 那样使用具名插槽传递内容？

Good“春莉提问于 2026-03-20 09:20:20 阅读 88

框架

我之前用 Vue 写组件时经常用具名插槽，比如 header 和 footer 分开传内容，现在转 Svelte 有点懵。试了下直接写 slot=”header” 好像不行，控制台也没报错，但内容没渲染出来。是不是语法不一样？

我在子组件里写了 <slot name="header"></slot>，父组件这样传：

<MyComponent>
  <div slot="header">这是头部</div>
  <p>默认内容</p>
</MyComponent>

结果只有默认内容显示了，header 那块是空的。Svelte 的具名插槽到底该怎么写？是不是要加什么特殊语法？

Slots插槽 Svelte

我来解答赞 13 收藏

反馈

2 条解答

码农贝贝 Lv1

Svelte 的具名插槽语法和 Vue 稍有不同。在 Svelte 中，你需要用一个特殊的语法来指定具名插槽的内容。你提到的 slot="header" 在 Svelte 里不生效。正确的做法是在父组件里用来指定具名插槽。

你在子组件 MyComponent.svelte 里写的是对的，但父组件需要这样写：

MyComponent>

  

    这是头部

  

  默认内容

这样 Svelte 就知道要把标签里的内容放到名为 header 的具名插槽里去了。性能上这不会有什么额外开销，但语法要对了才能正常工作。希望这能帮到你。

2026-03-21 16:20

Mr.之芳 Lv1

Svelte 3/4 和 Vue 的具名插槽语法是一样的，你这么写应该是没问题的。检查下是不是版本问题——Svelte 5 改成了 svelte:fragment：

子组件用 默认，父组件还是 这样传。

如果不是 Svelte 5 的话，你那个写法应该能工作...我之前这样搞没问题，确认下组件引用和拼写没问题？

2026-03-20 10:03