尧图网站建设 
很多 Vue 初学者第一次看到slot/slot或者template #default{ row }都会一脸懵slot 是什么为什么父组件可以往子组件里面塞东西为什么有时候插槽还能传数据其实 Vue 插槽并不复杂。一句话总结插槽Slot就是 Vue 提供的一种“组件内容扩展机制”让父组件可以向子组件指定位置传入自定义内容提高组件复用性。Vue 插槽主要分为三种默认插槽普通插槽具名插槽自定义插槽作用域插槽Scoped Slot下面一次讲透。一、为什么需要插槽先看一个问题。我们写一个按钮组件template button 登录 /button /template这个组件只能显示登录如果以后想显示注册或者提交怎么办难道复制三个组件当然不需要。我们希望MyButton 登录 /MyButton MyButton 注册 /MyButton按钮组件负责样式。文字内容由使用它的人决定。这就是插槽诞生的原因。二、默认插槽普通插槽1. 什么是默认插槽默认插槽就是子组件留一个位置父组件把内容放进去。例如子组件Button.vuetemplate button slot/slot /button /template这里slot/slot表示这里以后放父组件传来的内容。父组件template MyButton 登录 /MyButton MyButton 注册 /MyButton /template最终button 登录 /button button 注册 /button2. 默认插槽特点特点只有一个位置不需要名字父组件直接写内容即可例如Card h2 标题 /h2 /Card对应slot/slot三、具名插槽自定义插槽1. 为什么需要具名插槽默认插槽只有一个坑。但是实际开发中一个组件可能有多个区域。例如一个后台管理系统卡片---------------- 标题区域 内容区域 底部按钮区域 ----------------如果只有slot/slotVue 不知道内容应该放哪里。所以需要给插槽名字。2. 子组件定义多个插槽Card.vuetemplate div header slot nameheader/slot /header main slot/slot /main footer slot namefooter/slot /footer /div /template这里定义了三个位置插槽名称作用header头部默认插槽内容footer底部3. 父组件使用Card template #header h2 用户列表 /h2 /template p 用户数据展示 /p template #footer button 保存 /button /template /Card最终效果---------------- 用户列表 用户数据展示 保存按钮 ----------------4. #是什么意思你经常看到template #header其实就是template v-slot:header简写。四、作用域插槽重点作用域插槽是三种插槽里面最容易难理解的。因为它改变了方向。普通插槽父组件 | | 传内容 ↓ 子组件作用域插槽子组件 | | 传数据 ↓ 父组件1. 为什么需要作用域插槽比如子组件里面有数据script setup const user{ name:张三, age:18 } /script但是显示方式由父组件决定。有的人想显示张三有的人想显示姓名张三 年龄18怎么办子组件把数据暴露出去。2. 子组件传数据template slot :useruser/slot /template这里:useruser表示把 user 数据传给插槽。3. 父组件接收数据Card template #defaultscope {{scope.user.name}} /template /Cardscope就是子组件传来的对象。里面{ user:{ name:张三, age:18 } }五、后台管理系统中的真实案例你项目里面一定见过el-table-column template #default{row} {{row.username}} /template /el-table-column这就是作用域插槽。Element Plus 的 table内部类似slot :row当前行数据 /slot它把每一行数据传出来。你#default{row}接收。然后{{row.username}}决定显示用户名。六、三种插槽总结表类型作用方向使用场景默认插槽传普通内容父 → 子按钮文字、卡片内容具名插槽传多个区域内容父 → 子页面布局、头部底部作用域插槽子组件传数据给父组件子 → 父表格、自定义列表七、面试回答模板面试官Vue 插槽有哪些回答Vue 插槽主要分为三种。第一种是默认插槽也叫普通插槽用于父组件向子组件传递普通内容。第二种是具名插槽通过 name 区分多个插槽位置适用于组件多个区域需要自定义的情况。第三种是作用域插槽子组件可以通过 slot 绑定数据传递给父组件父组件根据数据决定最终渲染方式在 Element Plus 表格等组件中经常使用。八、一句话记忆默认插槽 父组件塞内容 具名插槽 父组件往指定位置塞内容 作用域插槽 子组件给数据父组件决定怎么显示 Vue 插槽到底是什么？从“占位置”到作用域插槽，一篇彻底搞懂 Slot
很多 Vue 初学者第一次看到slot/slot或者template #default{ row }都会一脸懵slot 是什么为什么父组件可以往子组件里面塞东西为什么有时候插槽还能传数据其实 Vue 插槽并不复杂。一句话总结插槽Slot就是 Vue 提供的一种“组件内容扩展机制”让父组件可以向子组件指定位置传入自定义内容提高组件复用性。Vue 插槽主要分为三种默认插槽普通插槽具名插槽自定义插槽作用域插槽Scoped Slot下面一次讲透。一、为什么需要插槽先看一个问题。我们写一个按钮组件template button 登录 /button /template这个组件只能显示登录如果以后想显示注册或者提交怎么办难道复制三个组件当然不需要。我们希望MyButton 登录 /MyButton MyButton 注册 /MyButton按钮组件负责样式。文字内容由使用它的人决定。这就是插槽诞生的原因。二、默认插槽普通插槽1. 什么是默认插槽默认插槽就是子组件留一个位置父组件把内容放进去。例如子组件Button.vuetemplate button slot/slot /button /template这里slot/slot表示这里以后放父组件传来的内容。父组件template MyButton 登录 /MyButton MyButton 注册 /MyButton /template最终button 登录 /button button 注册 /button2. 默认插槽特点特点只有一个位置不需要名字父组件直接写内容即可例如Card h2 标题 /h2 /Card对应slot/slot三、具名插槽自定义插槽1. 为什么需要具名插槽默认插槽只有一个坑。但是实际开发中一个组件可能有多个区域。例如一个后台管理系统卡片---------------- 标题区域 内容区域 底部按钮区域 ----------------如果只有slot/slotVue 不知道内容应该放哪里。所以需要给插槽名字。2. 子组件定义多个插槽Card.vuetemplate div header slot nameheader/slot /header main slot/slot /main footer slot namefooter/slot /footer /div /template这里定义了三个位置插槽名称作用header头部默认插槽内容footer底部3. 父组件使用Card template #header h2 用户列表 /h2 /template p 用户数据展示 /p template #footer button 保存 /button /template /Card最终效果---------------- 用户列表 用户数据展示 保存按钮 ----------------4. #是什么意思你经常看到template #header其实就是template v-slot:header简写。四、作用域插槽重点作用域插槽是三种插槽里面最容易难理解的。因为它改变了方向。普通插槽父组件 | | 传内容 ↓ 子组件作用域插槽子组件 | | 传数据 ↓ 父组件1. 为什么需要作用域插槽比如子组件里面有数据script setup const user{ name:张三, age:18 } /script但是显示方式由父组件决定。有的人想显示张三有的人想显示姓名张三 年龄18怎么办子组件把数据暴露出去。2. 子组件传数据template slot :useruser/slot /template这里:useruser表示把 user 数据传给插槽。3. 父组件接收数据Card template #defaultscope {{scope.user.name}} /template /Cardscope就是子组件传来的对象。里面{ user:{ name:张三, age:18 } }五、后台管理系统中的真实案例你项目里面一定见过el-table-column template #default{row} {{row.username}} /template /el-table-column这就是作用域插槽。Element Plus 的 table内部类似slot :row当前行数据 /slot它把每一行数据传出来。你#default{row}接收。然后{{row.username}}决定显示用户名。六、三种插槽总结表类型作用方向使用场景默认插槽传普通内容父 → 子按钮文字、卡片内容具名插槽传多个区域内容父 → 子页面布局、头部底部作用域插槽子组件传数据给父组件子 → 父表格、自定义列表七、面试回答模板面试官Vue 插槽有哪些回答Vue 插槽主要分为三种。第一种是默认插槽也叫普通插槽用于父组件向子组件传递普通内容。第二种是具名插槽通过 name 区分多个插槽位置适用于组件多个区域需要自定义的情况。第三种是作用域插槽子组件可以通过 slot 绑定数据传递给父组件父组件根据数据决定最终渲染方式在 Element Plus 表格等组件中经常使用。八、一句话记忆默认插槽 父组件塞内容 具名插槽 父组件往指定位置塞内容 作用域插槽 子组件给数据父组件决定怎么显示