第9篇:插槽(Slots)的使用

目标:掌握组件内容分发的灵活方式


1. 默认插槽(匿名插槽)
html 复制代码
<!-- 子组件 Layout.vue -->  
<template>  
  <div class="container">  
    <header>  
      <slot></slot>  <!-- 内容插入点 -->  
    </header>  
  </div>  
</template>  

<!-- 父组件使用 -->  
<Layout>  
  <h1>这是插入的标题内容</h1>  
</Layout>  
复制代码

关键点

  • <slot> 标签定义内容占位符

  • 父组件传入的内容会替换子组件的 <slot>


2. 具名插槽
html 复制代码
<!-- 子组件 Card.vue -->  
<template>  
  <div class="card">  
    <slot name="header"></slot>  
    <slot name="content"></slot>  
    <slot name="footer"></slot>  
  </div>  
</template>  

<!-- 父组件使用 -->  
<Card>  
  <template v-slot:header>  
    <h2>卡片标题</h2>  
  </template>  

  <template #content>  <!-- 简写语法 -->  
    <p>卡片正文内容...</p>  
  </template>  

  <template #footer>  
    <button>确认</button>  
  </template>  
</Card>  
复制代码

语法说明

  • v-slot:name 或简写 #name 指定插槽名称

  • 未命名的 <template> 内容会填充到默认插槽


3. 作用域插槽(向父组件传递数据)
html 复制代码
<!-- 子组件 TodoList.vue -->  
<template>  
  <ul>  
    <li v-for="todo in todos" :key="todo.id">  
      <slot :todo="todo"></slot>  
    </li>  
  </ul>  
</template>  

<!-- 父组件使用 -->  
<TodoList :todos="todoList">  
  <template #default="slotProps">  
    <span :class="{ done: slotProps.todo.isDone }">  
      {{ slotProps.todo.text }}  
    </span>  
  </template>  
</TodoList>  
复制代码

关键点

  • 子组件通过 <slot :data="value"> 传递数据

  • 父组件通过 #slotName="props" 接收数据


4. 插槽默认内容
html 复制代码
<!-- 子组件 Button.vue -->  
<template>  
  <button class="btn">  
    <slot>提交</slot>  <!-- 父组件不传内容时显示"提交" -->  
  </button>  
</template>  
复制代码

5. 动态插槽名(Vue3新特性)
html 复制代码
<template>  
  <Component>  
    <template #[dynamicSlotName]>  
      动态插槽内容  
    </template>  
  </Component>  
</template>  

<script setup>  
const dynamicSlotName = ref('header')  
</script>  

6. 插槽实战场景
  1. 布局组件:定义页面的通用结构(Header/Content/Footer)

  2. UI组件库:Table组件的自定义单元格渲染

  3. 高阶组件:通过作用域插槽传递业务数据


最佳实践

  • 复杂组件优先使用具名插槽

  • 避免在插槽内容中直接修改子组件状态

  • 作用域插槽适合需要定制渲染逻辑的场景

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python