<slot> 插槽出口

最后更新：2026-10-22

声明子组件模板中的内容出口：父组件传入的内容会替换到这里，可带默认（兜底）内容。

📝 语法

<slot></slot>
<slot name="header">默认标题</slot>

<!-- 作用域插槽：把子组件数据传出去 -->
<slot :item="item"></slot>

props	name（具名插槽，默认 default）；可用任意属性作为作用域数据传出

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

输出：

显示父组件传入的「自定义头部」与「正文内容」。

💡 提示 默认内容只在父组件没传东西时出现，是兜底 UI 的标准做法。

ℹ️ 说明 作用域插槽把子组件数据反向传给父组件（列表组件定制的核心）。

⚠️ 注意 插槽内容在父组件作用域编译：它不能直接访问子组件的数据（需作用域插槽）。

更多案例即将上线。

Q 父组件没传内容会怎样？

A 显示 <slot> 标签里的默认内容；没有默认内容则什么都不渲染。

Q 一个组件能有几个插槽？

A 任意多个：一个默认 + 多个具名。

Q 插槽内容能访问子组件数据吗？

A 不能，除非用作用域插槽把数据通过 slot 属性传出去。

Web-Tutorial 技术团队

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