Vue3学习笔记之插槽

news2024/11/10 10:47:23

目录

前言

一、基础

(一) 默认插槽

(二) 具名插槽

(三) 作用域插槽

(四) 动态插槽

二、实战案例


前言

插槽(Slots)?

插槽可以实现父组件自定义内容传递给子组件展示,相当于一块画板,画板就是我们的子组件,我们在上面定义好布局和固定内容,然后将需要变化的部分空出来(挖坑),然后别人就可以根据需要在这个坑位上填充内容

插槽功能可以让我们实现组件多样化减少重复代码,对于封装组件也是提供了巨大的帮助

一、基础

(一) 默认插槽

插槽的实现方式很简单,子组件需要在填充内容的部分写上标签slot即可,然后父组件在引入子组件标签写入内容,填入的内容就会展示到子组件中

子组件

<div class="box">
  <header>头部</header>
  <main>
    <!-- 插槽 -->
    <slot></slot>
  </main>
  <footer>尾部</footer>
</div>

父组件

<div>
    <Child>父组件定义的内容</Child>
</div>

在子组件中定义了头部和尾部,而中间的内容区域由父组件填充

(二) 具名插槽

当一个组件需要多个插槽或需要父组件内容插入到位置上时就需要到具名插槽

子组件

<div class="box">
  <header>头部</header>
  <main>
    <!-- 插槽-1 -->
    <slot name="main"></slot>
  </main>
  <footer>
    <!-- 插槽-2 -->
    <slot name="footer"></slot>
  </footer>
</div>

父组件

<Child>
  <template #main>
    <button>hello</button>
  </template>
  <template #footer>
    <p>哈哈哈哈哈</p>
  </template>
</Child>

效果

(三) 作用域插槽

子组件可以通过动态绑定的方式,将子组件的值通过插槽传递给父组件

子组件

<div class="box">
  <header>头部</header>
  <main>
    <!-- 插槽 -->
    <slot name="main" :title="'Vue3'"></slot>
  </main>
</div>

父组件

<Child>
  <template #main="{ title }">
    <p>我是子组件传递的值:{{ title }}</p>
  </template>
</Child>

效果

(四) 动态插槽

动态插槽:可以根据名称去动态匹配插槽位置

子组件

<div class="box">
  <header>
    <!-- 插槽 -->
    <slot name="header"></slot>
  </header>
  <main>
    <!-- 插槽 -->
    <slot name="main"></slot>
  </main>
  <footer>
    <!-- 插槽 -->
    <slot name="footer"></slot>
  </footer>
</div>

父组件

<script setup lang="ts">
import Child from "./components/Child.vue";
const slotName = ref("main");
</script>

<template>
  <div>
    <Child>
      <template #[slotName]> 鸡你太美 </template>
    </Child>
  </div>
</template>

二、实战案例

结合element-plus封装一个管理后台系统的数据表格,后台管理系统中,常见的就是数据表格的展示,一般模块就需要一个表格进行展示,但是表格有些代码是重复性的,如果每个模块都要写一份新的表格代码,那就发生耗费时间代码重复性高可维护性差等问题,那此时就可以将表格封装成组件,并加上插槽扩大表格的可拓展性

Table封装组件

<script setup lang="ts">
interface Props {
  tableColumn: any;
  tableData: any;
}

defineProps<Props>();
</script>

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column
      v-for="column in tableColumn"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <slot name="left"></slot>
        <el-button link type="primary" size="small"> 添加 </el-button>
        <el-button link type="danger" size="small">删除</el-button>
        <slot name="right" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

父组件

<script setup lang="ts">
import CyTable from "./components/CyTable.vue";

const tableColumn = [
  {
    label: "出生日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "住址",
    prop: "address",
  },
];

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<template>
  <div class="box">
    <header>头部</header>
    <main>
      <CyTable :tableColumn="tableColumn" :tableData="tableData">
        <template #right="{ row }">
          <p>获取</p>
          {{ row }}
        </template>
      </CyTable>
    </main>
    <footer>尾部</footer>
  </div>
</template>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header {
  text-align: center;
  width: 100%;
  height: 100px;
}
main {
  box-sizing: border-box;
  padding: 50px;
  margin: 20px;
  width: 80%;
  flex: 1;
  background-color: skyblue;
}
footer {
  text-align: center;
  width: 100%;
  height: 200px;
}
</style>

实现效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2080199.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

速速报名|数据治理与数据建模workshop报名开启

由Datamodeling社区出品的「数据治理与数据建模workshop 」将在9月份正式启动上海站和深圳站。 本课程由社区特邀讲师王琤老师、黄峰老师授课&#xff0c;两位老师基于丰富的数据管理经验提炼出知识体系&#xff0c;以面对面带练的方式&#xff0c;帮助学习者快速掌握数据建模…

dp+差分数组

前言&#xff1a;怎么也没想到要用dp来做&#xff0c;并且这个题目中如果列为1的话还要特殊考虑 题目地址 #include<bits/stdc.h> using namespace std;//#define int long long const int N (int)5e3 10; int dp[N][N][2]; // 0 表示上端点&#xff0c;1表示下端点 in…

正确枚举 Winlogon 桌面窗口层次

目录 前言 原理解释 原理实现 Winlogon 桌面窗口层次 本文出处链接&#xff1a;https://blog.csdn.net/qq_59075481/article/details/141608316。 前言 众所周知&#xff0c;从 Windows 7 开始&#xff0c;Winlogon 桌面不再使用 SASWindow 作为背景窗口&#xff0c;而是采…

翻斗雨量监测站

翻斗雨量监测站通常用于测量和记录降雨量&#xff0c;其主要功能包括&#xff1a; 测量降雨量&#xff1a;翻斗雨量监测站使用翻斗式测量原理&#xff0c;通过记录翻斗倒转的次数或翻斗中积累的水量来测量降雨量。可以准确地记录降雨量的变化。 记录降雨时间&#xff1a;翻斗雨…

PowerDesigner生成数据字典文档

PowerDesigner生成数据字典文档 目录 1. 设置报告 2. 导出报告 3. 查看报告 设置报告 删除多余的选项&#xff0c;只保留【LIst of Table Columns -表%PARENT%的栏的清单】选项。 只显示Name、Code、Data Type、Length、Is Key等列 导出报告 查看报告

如何用Java SpringBoot+Vue构建房产信息管理系统?详解开发流程

&#x1f393; 作者&#xff1a;计算机毕设小月哥 | 软件开发专家 &#x1f5a5;️ 简介&#xff1a;8年计算机软件程序开发经验。精通Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等技术栈。 &#x1f6e0;️ 专业服务 &#x1f6e0;️ 需求定制化开发源码提…

互联网应用主流框架整合之Spring缓存机制和Redis结合

Redis和数据库的结合 在实际的商用软件使用中&#xff0c;通常都是Redis和关系型数据配置使用&#xff0c;单纯使用Redis来存数据成本太高&#xff0c;并且其持久化和计算能力偏差&#xff0c;这两块无法和关系型数据相比较&#xff0c;而Redis和关系型数据库共存的场景就会带…

C++必修:set与map的模拟实现

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. set与map的结构 我们知道STL中的set与map底层就是一颗红黑树&#xff0c;接下…

如何在Spring中为`@Value`注解设置默认值

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

如何处理在学校Linux连接不上服务器

一、问题描述 当我们在周末在图书馆背着室友偷偷学习时&#xff0c;准备好好学习Linux&#xff0c;争取在日后大展拳脚时&#xff0c;却突然尴尬的发现&#xff0c;连接不上服务器&#xff0c;总是出现以下画面&#xff1a; 那么&#xff0c;我们该如何解决问题呢&#xff1f; …

螺杆支撑座与滚珠丝杆的精准适配!

螺杆支撑座与滚珠丝杆的适配是确保机械系统的稳定性、精度和耐用性的关键&#xff0c;其适配方法主要包括螺纹连接、联轴器连接、锁紧连接。 螺杆支撑座种类多样&#xff0c;每种类型都有其特定的适用范围和性能特点。因此&#xff0c;根据滚珠丝杆的规格和应用需求&#xff0c…

Python接口测试之如何使用requests发起请求例子解析

在Python中&#xff0c;使用requests库发起HTTP请求是一种常见的接口测试方法。以下是一些使用requests库的基本示例&#xff0c;涵盖了GET、POST、PUT、DELETE等HTTP方法。 安装requests库 首先&#xff0c;确保你已经安装了requests库。如果未安装&#xff0c;可以通过以下…

【系统分析师】-案例篇-数据库

1、分布式数据库 1&#xff09;请用300字以内的文字简述分布式数据库跟集中式数据库相比的优点。 &#xff08;1&#xff09;坚固性好。由于分布式数据库系统在个别结点或个别通信链路发生故障的情况下&#xff0c;它仍然可以降低级别继续工作&#xff0c;系统的坚固性好&…

线程:线程创建pthread_create,线程间的同步与互斥

线程的创建 线程的创建是通过调用pthread_create函数来实现的。该函数的原型如下&#xff1a; int pthread_create(pthread_t *thread, const pthread_attr_t *attr, void *(*start_routine)(void *), void *arg);参数说明&#xff1a; thread&#xff1a;指向pthread_t类型…

开源word文档相似度对比 软件WinMerge

WinMerge 官网下载 &#xff1a;GitHub - WinMerge/winmerge: WinMerge is an Open Source differencing and merging tool for Windows. WinMerge can compare both folders and files, presenting differences in a visual text format that is easy to understand and hand…

ros2_python编程_多个文件python打包_目录拷贝_解决import错误问题ModuleNotFoundError

1.问题 ros2 python编写程序, 有多个python文件 如何打包多个python文件?解决import错误问题如何打包 有python目录结构的工程 1.ros2 多个python文件示例 代码目录结构, gitee 在线代码 tree 7_multi_file_setup/ 7_multi_file_setup/ ├── file1.py ├── main_node.…

飞书怎么关联任意两段话

最近开始用飞书记文档&#xff0c;体验实在是非常的丝滑&#xff0c;对我来说感觉没有找到更好的竞品了。废话不多说&#xff0c;接下来简单介绍一下怎么关联任意两段话吧。 首先说明&#xff0c;关联可以单向&#xff0c;也可以双向。 直接举例。 我想要将蓝字关联到最下面的…

国标GB28181视频监控EasyCVR视频汇聚平台国标注册被陌生IP入侵如何处理?

GB28181国标/GA/T1400协议/安防综合管理系统EasyCVR视频汇聚平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。智慧安防/视频存储/视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级…

Java基础(包装类)

文章目录 前言 一、包装类的概述 二、自动拆装箱 三、128陷阱&#xff08;面试重点&#xff09; 四、自动拆装箱例题分析 前言 该篇文章创作时参考查阅了如下文章 Java种的包装类 Java包装类&#xff08;自动拆装箱&#xff09; Java--自动拆箱/装箱/实例化顺序/缓存…

第三期书生大模型实战营之茴香豆工具实践

文章目录 基础任务作业记录1. 环境准备2. 模型准备3. 修改配置文件4. 知识库创建6. 启动茴香豆webui 基础任务 在 InternStudio 中利用 Internlm2-7b 搭建标准版茴香豆知识助手&#xff0c;并使用 Gradio 界面完成 2 轮问答&#xff08;问题不可与教程重复&#xff0c;作业截图…