vue中slot的用法

Vue.js 中的 Slot（插槽）是一种强大的内容分发机制，允许父组件向子组件传递模板片段，实现高度灵活的组件复用。以下是其核心用法和示例的精炼总结：

1. Slot 的核心作用

内容分发：父组件通过插槽向子组件注入动态内容。
组件解耦：子组件负责结构，父组件控制内容，提升可维护性。
类型支持：包括默认插槽、具名插槽和作用域插槽。

2. Slot 的三种类型(1) 默认插槽

用法：子组件用 <slot> 不指定名称，父组件未命名的内容自动填充。
示例：<div> <slot>默认内容（父组件未提供时显示）</slot></div><Child>这段内容会替换子组件的默认插槽</Child>

(2) 具名插槽

用法：通过 name 属性标识插槽，父组件用 v-slot:name 或 #name 指定内容位置。
示例：<div> <slot name="header"></slot> <slot></slot> </div><Child> <template #header>这是头部内容</template> <p>这是默认插槽的内容</p></Child>

(3) 作用域插槽

用法：子组件通过插槽暴露数据，父组件用 v-slot 接收并自定义渲染。
示例：<ul> <li v-for="item in items" :key="item.id"> <slot :item="item">{{ item.defaultText }}</slot> </li></ul><Child :items="list"> <template #default="{ item }"> <span>{{ item.customText }}</span> </template></Child>

3. Slot 的优势

代码复用：通用组件（如布局、卡片）通过插槽适配不同内容。
灵活性：父组件完全控制插槽内容的结构和样式。
可扩展性：作用域插槽允许子组件传递数据，父组件自定义渲染逻辑。

4. 完整示例子组件（Layout.vue）<template> <div class="layout"> <header><slot name="header"></slot></header> <main><slot></slot></main> <footer><slot name="footer"></slot></footer> </div></template>父组件（App.vue）<template> <Layout> <template #header> <h1>页面标题</h1> </template> <p>这是主体内容，通过默认插槽插入。</p> <template #footer> <p>© 2023 版权信息</p> </template> </Layout></template>5. 注意事项

默认内容：子组件可在 <slot> 内提供后备内容，父组件未传递时显示。
动态插槽名：可通过 v-slot:[dynamicName] 动态绑定插槽名（Vue 2.6+）。
废弃语法：Vue 2 的 slot="name" 和 slot-scope 在 Vue 3 中已废弃，推荐使用 v-slot。

通过合理使用插槽，可以构建出高度可定制的组件库，显著提升开发效率和代码可维护性。

您可能感兴趣问答

Collapsible

热门标签

热点问答