第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. 高阶组件:通过作用域插槽传递业务数据


最佳实践

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

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

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

相关推荐
Sun_light10 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子12 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000012 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心13 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再13 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了17 分钟前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm17 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v21 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠23 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue25 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html