vue.js插槽是组件内容分发机制，含默认插槽（无name）、具名插槽（用name区分区域）、作用域插槽（传递子组件数据供父组件定制渲染）、动态与条件插槽（运行时控制插槽名或显示）。
Vue.js 中的 Slots（插槽） 是实现组件内容分发的核心机制，它让父组件能向子组件“注入”任意模板结构，从而提升组件的复用性与灵活性。理解插槽不是为了记住语法，而是掌握“谁控制内容、谁决定渲染位置”这一关键逻辑。
默认插槽：最基础的内容传递方式
当子组件模板中只写一个 <slot></slot>，且没有 name 属性时，就启用了默认插槽。父组件中写在组件标签内的所有内容，都会被自动插入到这个位置。
例如：
子组件 Card.vue：
{{ title }}
父组件中使用：
姓名：张三
邮箱：zhangsan@example.com
渲染结果就是标题加两段用户信息——内容由父组件提供，位置由子组件的 <slot></slot> 决定。
具名插槽：按区域精准投递内容
当子组件有多个可替换区域（如头部、主体、底部），就需要用 name 区分插槽。父组件通过 v-slot:name（简写为 #name）指定内容去向。
子组件中定义：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章