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

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

框架

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

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

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

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

Slots插槽 Svelte

我来解答赞 2 收藏

反馈

1 条解答

Mr.之芳 Lv1

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

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

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

2026-03-20 10:03