什么是 slots 和 scoped slots？

Question

Accepted Answer

**Slots** 让父组件能够向子组件传递**模板内容**——这是构建灵活、可复用的包装器（卡片、模态框、布局）的方式，其中使用者控制内部标记。 ## 基本 slot ```vue ``` ```vue

Title

Any content!

``` 子组件定义一个"洞"（``）；父组件用它想要的任何标记来填充它。这比通过 props 传递字符串灵活得多。 ## Named slots — 多个插入点 ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — 子组件向上传递数据给 slot 内容有时子组件拥有父组件的 slot 需要的数据（例如列表中的每一项）。**Scoped slots** 将子组件的数据暴露给父组件的模板： ```vue ``` ```vue ``` Scoped slots 是**无渲染/无头组件**的关键：子组件处理逻辑（循环、获取、状态），让父组件完全控制呈现。 ## 为什么这很重要 Slots 是 Vue 的内容分发机制——对可复用布局和包装器组件至关重要。 Named slots 提供多个插入点，而 scoped slots（将子组件数据暴露给父组件定义的模板）启用了强大的模式，如无头组件和可定制的列表/表格。这些使 Vue 组件具有可组合性而不是刚性。