1. Slot 插槽概述组件内容分发的核心机制在 Vue.js 中Slot插槽是一种特殊的组件内容分发机制。它的核心作用是在组件模板中预留出位置让父组件可以动态注入自己的 HTML 结构、内容或组件从而实现组件的复用性和灵活性。2. 为什么要使用 Slot传统的组件封装往往导致代码重复即父组件传入什么内容子组件就渲染什么。但很多时候我们需要子组件保持固定的样式或布局而内容却是变化的。Slot 正是解决这个问题的关键。3. Slot 的分类与工作原理下面通过一个流程图来展示 Slot 在组件层级中的分发过程。包含HTML内容与标签父组件子组件标签插槽分发逻辑默认插槽: 也就是未命名的插槽具名插槽: 使用 name 属性区分的插槽作用域插槽: 子组件向父组件传递数据最终渲染的 DOM 树4. 默认插槽的使用默认插槽是最基础的形式。子组件中定义一个slot/slot标签父组件直接在子组件标签内写入内容即可。子组件代码!-- ChildComponent.vue -- template div classbox h3这是一个子组件盒子/h3 !-- 默认插槽位置 -- slot/slot /div /template父组件代码template ChildComponent p这是父组件传递的自定义内容/p /ChildComponent /template5. 具名插槽Named Slots当一个组件包含多个不同位置的插槽时我们需要给它们命名。子组件使用name属性来定义插槽名称父组件使用v-slot或#语法Vue 3 语法来指定内容对应哪个插槽。子组件代码template div classcard header !-- 定义具名插槽 header -- slot nameheader/slot /header main !-- 默认插槽 -- slot/slot /main footer slot namefooter/slot /footer /div /template父组件代码template div MyCard template #header h1标题区域/h1 /template p主要内容区域/p template #footer button提交/button /template /MyCard /div /template6. 作用域插槽Scoped Slots作用域插槽是 Vue 中最强大的功能之一。它允许子组件向插槽提供数据父组件可以决定这些数据如何渲染。子组件代码在这里子组件通过props将数据传递给插槽。template ul li v-foritem in items :keyitem.id !-- 将 item 数据通过插槽 props 传给父组件 -- slot :itemitem/slot /li /ul /template script export default { data() { return { items: [ { id: 1, name: Alice }, { id: 2, name: Bob } ] } } } /script父组件代码父组件通过v-slot接收插槽 prop。template div ChildComponent v-slotslotProps !-- 使用 slotProps.item 访问子组件传递的数据 -- div{{ slotProps.item.name }}/div /ChildComponent /div /template7. 总结Vue 中的 Slot 机制是实现高复用性组件的基础。它让开发者能够保持组件模板结构的稳定性同时赋予父组件完全控制子组件内容的权力。熟练掌握默认插槽、具名插槽和作用域插槽是进阶 Vue 开发不可或缺的技能。
