Vue 3插槽

  • Vue 3中的插槽(Slots)是一种强大的模式,用于创建可复用的组件,它允许你将模板插入到组件内部,同时保持组件的封装性和可重用性。在Vue 3中,插槽的使用变得更加灵活和强大。

基本插槽

  1. 默认插槽 :
    在子组件中,使用<slot>标签定义一个插槽。父组件中的任何内容都将替换这个<slot>标签。
vue 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>
vue 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent>
    这里的内容会显示在子组件的插槽中。
  </ChildComponent>
</template>

具名插槽

  1. 定义具名插槽 :
    使用name属性在子组件中定义多个插槽。
vue 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot> <!-- 另一个具名插槽 -->
  </div>
</template>
  1. 使用具名插槽 :
    父组件使用v-slot指令指定要填充的插槽。
vue 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:header>
      这里是头部内容。
    </template>

    这里是默认插槽的内容。

    <template v-slot:footer>
      这里是底部内容。
    </template>
  </ChildComponent>
</template>

作用域插槽

  1. 定义作用域插槽 :
    子组件可以通过作用域插槽向父组件传递数据。
vue 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>
  1. 使用作用域插槽 :
    父组件可以使用这些数据来定制插槽的内容。
vue 复制代码
<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:item="slotProps">
      <div>{{ slotProps.item.name }}</div>
    </template>
  </ChildComponent>
</template>

插槽的默认内容

  1. 提供默认内容 :
    在子组件的插槽中可以定义默认内容。如果父组件没有提供内容,将显示默认内容。
vue 复制代码
<!-- 子组件 -->
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

注意事项

  • 插槽内容是在父组件中编译的,而不是在子组件中。
  • 作用域插槽可以让父组件访问子组件中的数据。
  • 使用插槽时,遵循单向数据流的原则,避免直接修改子组件传递给父组件的数据。

插槽是Vue组件系统中一个非常强大的特性,它提供了一种灵活的方式来创建高度定制的组件,同时保持组件逻辑的封装和可重用性。

相关推荐
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒2 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
lichong9512 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone