slots 声明式插槽访问（3.3+）

最后更新：2026-10-22

slots 选项以函数形式声明对插槽的访问，并在编译期生成 $slots：让“是否传入插槽”也能参与依赖追踪。

📝 语法

export default {
  slots: { default: () => [], header: () => [] }
}

value	对象：键为插槽名，值为返回该插槽内容的函数

返回值：无返回值（生成实例上的 $slots/$stable）

修改下面的代码，在预览区实时查看效果：

输出：

显示父组件传入的「父组件标题」。

ℹ️ 说明 3.3+ 新增：解决“插槽内容变化后判断不更新”的追踪问题。

💡 提示 组件库中判断插槽存在性时更推荐这种声明式写法。

⚠️ 注意 声明后列表要准确：漏写某个插槽名会让对应内容拿不到。

更多案例即将上线。

Q 和 $slots 的区别？

A 功能相同，但声明式写法建立了依赖追踪，插槽变化能触发更新。

Q 需要把所有插槽列出来吗？

A 是，未声明的插槽不会进入 $slots（动态插槽名场景要留意）。

Q 和 <script setup> 里 useSlots 的关系？

A 殊途同归：选项式用 slots 选项，组合式用 useSlots()。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。