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组件系统中一个非常强大的特性,它提供了一种灵活的方式来创建高度定制的组件,同时保持组件逻辑的封装和可重用性。

相关推荐
一米八二的矮个子3 小时前
JavaScript语法进阶(一)
javascript
庞囧3 小时前
大白话讲 React 原理:Scheduler 任务调度器
前端
liyi_hz20083 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
东华帝君3 小时前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW3 小时前
手撕 Promise 一文搞定
前端·面试
温宇飞3 小时前
Web 异步编程
前端
腹黑天蝎座3 小时前
浅谈React19的破坏性更新
前端·react.js
东华帝君3 小时前
react组件常见的性能优化
前端
第七种黄昏3 小时前
【前端高频面试题】深入浏览器渲染原理:从输入 URL 到页面绘制的完整流程解析
前端·面试·职场和发展
angelQ3 小时前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript