Vue插槽 Slot 怎么用?教你如何实现灵活的组件内容分发指南

冬晨酱_3109

冬晨酱_3109

2026-03-24

898人浏览

原创

vue插槽是模板级内容分发机制,非通信或数据传递;默认插槽用无名,支持后备内容;具名插槽通过name属性精准投递;作用域插槽可向父组件传递子组件数据。

vue插槽 slot 怎么用?教你如何实现灵活的组件内容分发指南

Vue插槽(Slot)本质是子组件预留的内容“入口”,父组件传什么,它就渲染什么——不是父子通信,也不是数据传递,而是模板级的内容分发机制。

默认插槽:最常用、最直接的占位方式

子组件用一个无名 定义接收位置,父组件在标签内写内容,就会自动填进去。

它支持后备内容:在 默认文案 中写文字或 HTML,当父组件没传任何内容时,这部分就会显示。

  • 子组件中只能有一个默认插槽逻辑上最清晰;多个默认插槽会导致内容重复渲染,容易出错
  • 父组件传入的内容保持原有作用域——能访问父组件的 data、methods、计算属性,但无法读取子组件内部的数据
  • 传入内容可以是纯文本、HTML 标签、其他组件,甚至带 v-if / v-for 的复杂结构

具名插槽:给不同位置起名字,精准投递

当一个组件需要多个可定制区域(比如页头、主体、页脚),就用 name 属性区分插槽:

子组件里写:、、还有一个没 name 的就是默认插槽。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习