Vue插槽

Vue插槽

  • 一、插槽-默认插槽
    • 1.作用
    • 2.需求
    • 3.问题
    • 4.插槽的基本语法
    • 5.代码示例
    • 6.总结
  • 二、插槽-后备内容（默认值）
    • 1.问题
    • 2.插槽的后备内容
    • 3.语法
    • 4.效果
    • 5.代码示例
  • 三、插槽-具名插槽
    • 1.需求
    • 2.具名插槽语法
    • 3.v-slot的简写
    • 4.代码示例
    • 5.总结
  • 四、作用域插槽
    • 1.插槽分类
    • 2.作用
    • 3.场景
    • 4.使用步骤
    • 5.代码示例
    • 6.总结

一、插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 自定义

在这里插入图片描述

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分，改用<slot></slot>占位
  2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换 slot
  3. 给插槽传入内容时，可以传入纯文本、html标签、组件

在这里插入图片描述

5.代码示例

MyDialog.vue

<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template><script>
export default {data () {return {}}
}
</script><style scoped>
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>

App.vue

<template><div><MyDialog><p>你确认要删除吗</p></MyDialog><MyDialog><a href="#">在吗</a></MyDialog></div>
</template><script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script><style>
body {background-color: #b3b3b3;
}
</style>

6.总结

场景：组件内某一部分结构不确定，想要自定义怎么办

使用：插槽的步骤分为哪几步？

二、插槽-后备内容（默认值）

1.问题

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

在这里插入图片描述

能否给插槽设置 默认显示内容 呢？

2.插槽的后备内容

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。

3.语法

在 <slot> 标签内，放置内容, 作为默认显示内容

在这里插入图片描述

4.效果

  • 外部使用组件时，不传东西，则slot会显示后备内容

    在这里插入图片描述

  • 外部使用组件时，传东西了，则slot整体会被换掉

    在这里插入图片描述

5.代码示例

MyDialog.vue

<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><slot>我是后备内容</slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template><script>
export default {data () {return {}}
}
</script><style scoped>
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>

App.vue

<template><div><MyDialog></MyDialog><MyDialog>你确认要退出么</MyDialog></div>
</template><script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script><style>
body {background-color: #b3b3b3;
}
</style>

三、插槽-具名插槽

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制 在这里插入图片描述

上面的弹框中有三处不同，但是默认插槽只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

  • 多个slot使用name属性区分名字

    在这里插入图片描述

  • template配合v-slot:名字来分发对应标签

    在这里插入图片描述

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

4.代码示例

App.vue

<template><div><MyDialog><template v-slot:head><h3>警告</h3></template><template #content>确定要退出吗</template><template #footer><button>确定</button><button>退出</button></template></MyDialog></div>
</template>
<script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script><style>
body {background-color: #b3b3b3;
}
</style>

MyDialog.vue

<template><div class="dialog"><div class="dialog-header"><slot name="head"></slot><span class="close">✖️</span></div><div class="dialog-content"><slot name="content">我是后备内容</slot></div><div class="dialog-footer"><slot name="footer"></slot></div></div>
</template><script>
export default {data () {return {}}
}
</script><style scoped>
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>

5.总结

  • 组件内 有多处不确定的结构 怎么办?
  • 具名插槽的语法是什么？
  • v-slot:插槽名可以简化成什么?
  • 一旦插槽起了名字就只是具名插槽，只支持定向分发。
  • 需要使用template标签进行包裹，不然无法区分整体。

四、作用域插槽

1.插槽分类

  • 默认插槽

  • 具名插槽

    插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

3.场景

封装表格组件(id和操作不同)

在这里插入图片描述

4.使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>

  2. 所有添加的属性, 都会被收集到一个对象中

    { id: 3, msg: '测试文本' }

  3. 在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

    <MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template>
</MyTable>

5.代码示例

MyTable.vue

<template><table class="my-table"><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td>
<!--       1. 给我们的slot标签以添加属性的方式传值--><slot :row="item" msg="测试文本"></slot>
<!--        2.会将所有的属性添加到一个对象当中--></td></tr></tbody></table>
</template><script>
export default {props: {data: Array}
}
</script><style scoped>
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}.my-table thead {background-color: #1f74ff;color: #fff;
}.my-table thead th {font-weight: normal;
}.my-table thead tr {line-height: 40px;
}.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}.my-table td:last-child {border-right: none;
}.my-table tr:last-child td {border-bottom: none;
}.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
</style>

App.vue

<template><div><MyTable :data="list"><template #default="{ row }"><button @click="show(row)">查看</button></template></MyTable><MyTable :data="list2"><!--      3.通过template #插槽名="变量名" 进行接收--><template #default="obj">{{ obj.msg }}<button @click="del(obj.row.id)">删除</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'export default {methods: {del(id) {console.log(id)this.list2 = this.list2.filter(item => item.id !== id)}, show(row) {console.log(row)}},data() {return {list: [{id: 1, name: '张小花', age: 18},{id: 2, name: '孙大明', age: 19},{id: 3, name: '刘德忠', age: 17},],list2: [{id: 1, name: '赵小云', age: 18},{id: 2, name: '刘蓓蓓', age: 19},{id: 3, name: '姜肖泰', age: 17},]}},components: {MyTable}
}
</script>

6.总结

1.作用域插槽的作用是什么？

2.作用域插槽的使用步骤是什么？

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓价值1-如何在电脑上运行ADB

安卓价值1-如何在电脑上运行ADB

ADB&#xff08;Android Debug Bridge&#xff09;是Android平台的调试工具&#xff0c;它是一个命令行工具&#xff0c;用于与连接到计算机的Android设备进行通信和控制。ADB提供了一系列命令&#xff0c;允许开发人员执行各种操作&#xff0c;包括但不限于&#xff1a; 1. 安…
阅读更多...
在python中JSON数据格式的使用

在python中JSON数据格式的使用

什么是JSON&#xff1f; JSON是一种数据格式&#xff0c;由美国程序设计师DouglasCrockford创建的&#xff0c;JSON全名是JavaScript Object Notation,由JSON英文全文字义我们可以推敲JSON的缘由&#xff0c;最初是为JavaScript开发的。这种数据格式由于简单好用被大量应用在We…
阅读更多...
DS Wannabe之5-AM Project: DS 30day int prep day15

DS Wannabe之5-AM Project: DS 30day int prep day15

Q1. What is Autoencoder? 自编码器是什么&#xff1f; 自编码器是一种特殊类型的神经网络&#xff0c;它通过无监督学习尝试复现其输入数据。它通常包含两部分&#xff1a;编码器和解码器。编码器压缩输入数据成为一个低维度的中间表示&#xff0c;解码器则从这个中间表示重…
阅读更多...
数据库被人破解，删除数据，勒索

数据库被人破解，删除数据，勒索

事情是这样的&#xff0c;我买了一台服务器自己部署项目玩儿玩儿&#xff0c;我的数据库运行在3306端口&#xff0c;密码没改&#xff0c;就是默认的123456&#xff0c;诡异的事情发生了&#xff0c;用了一段时间之后&#xff0c;数据库突然连接不上了&#xff0c;我一通操作猛…
阅读更多...
Python爬虫——解析库安装（1）

Python爬虫——解析库安装（1）

目录 1.lxml安装2.Beautiful Soup安装3.pyquery 的安装 我创建了一个社区&#xff0c;欢迎大家一起学习交流。社区名称&#xff1a;Spider学习交流 注&#xff1a;该系列教程已经默认用户安装了Pycharm和Anaconda&#xff0c;未安装的可以参考我之前的博客有将如何安装。同时默…
阅读更多...
【开源】SpringBoot框架开发企业项目合同信息系统

【开源】SpringBoot框架开发企业项目合同信息系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…
阅读更多...
Linux多线程[二]

Linux多线程[二]

引入知识 进程在线程内部执行是OS的系统调度单位。 内核中针对地址空间&#xff0c;有一种特殊的结构&#xff0c;VM_area_struct。这个用来控制虚拟内存中每个malloc等申请的空间&#xff0c;来区别每个malloc的是对应的堆区哪一段。OS可以做到资源的精细度划分。 对于磁盘…
阅读更多...
嵌入式软件设计入门：从零开始学习嵌入式软件设计

嵌入式软件设计入门：从零开始学习嵌入式软件设计

&#xff08;本文为简单介绍&#xff0c;个人观点仅供参考&#xff09; 首先,让我们了解一下嵌入式软件的定义。嵌入式软件是指运行在嵌入式系统中的特定用途软件,它通常被用来控制硬件设备、处理实时数据和实现特定功能。与桌面应用程序相比,嵌入式软件需要具备更高的实时性、…
阅读更多...
反无人机系统技术分析，无人机反制技术理论基础，无人机技术详解

反无人机系统技术分析，无人机反制技术理论基础，无人机技术详解

近年来&#xff0c;经过大疆、parrot、3d robotics等公司不断的努力&#xff0c;具有强大功能的消费级无人机价格不断降低&#xff0c;操作简便性不断提高&#xff0c;无人机正快速地从尖端的军用设备转入大众市场&#xff0c;成为普通民众手中的玩具。 然而&#xff0c;随着消…
阅读更多...
Python算法题集_翻转二叉树

Python算法题集_翻转二叉树

Python算法题集_翻转二叉树 题226&#xff1a;翻转二叉树1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【DFS递归】2) 改进版一【BFS迭代&#xff0c;节点循环】3) 改进版二【BFS迭代&#xff0c;列表循环】 4. 最优算法 本文为Python算法题集…
阅读更多...
Spring Boot 笔记 019 创建接口_文件上传

Spring Boot 笔记 019 创建接口_文件上传

1.1 创建阿里OSS bucket OSS Java SDK 兼容性和示例代码_对象存储(OSS)-阿里云帮助中心 (aliyun.com) 1.2 编写工具类 package com.geji.utils;import com.aliyun.oss.ClientException; import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import com.aliyun…
阅读更多...
加速创新如何先从创意管理开始?

加速创新如何先从创意管理开始?

文章详细介绍了什么是创意管理以及它在组织中的重要性和最佳实践。创意管理是指在组织内捕捉、组织、评估和实施创意的过程。它通过建立一个结构化的系统&#xff0c;从员工、客户或其他利益相关者那里收集创意&#xff0c;并系统地审查和选择最有前景的创意进行进一步的开发或…
阅读更多...
算法学习——LeetCode力扣回溯篇3

算法学习——LeetCode力扣回溯篇3

算法学习——LeetCode力扣回溯篇3 491. 非递减子序列 491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。…
阅读更多...
2024龙年特别篇 -- 魔法指针 之 指针变量的意义 指针运算

2024龙年特别篇 -- 魔法指针 之 指针变量的意义 指针运算

学习完指针变量&#xff1a;链接后&#xff0c; 我们继续学习指针变量的应用 目录 程序展示 原始方式 指针变量方式 代码对比 指针运算 指针-整数 用指针打印数组内容 使用指针打印1-10中的奇数 指针-指针 指针的关系运算 程序展示 打印一个有10个元素的数组&am…
阅读更多...
语言与科技创新（大语言模型对科技创新的影响）

语言与科技创新（大语言模型对科技创新的影响）

1.科技创新中的语言因素 科技创新中的语言因素至关重要&#xff0c;具体体现在以下几个方面&#xff1a; 科技文献交流&#xff1a; 英语作为全球科学研究的通用语言&#xff0c;极大地推动了科技成果的国际传播与合作。科学家们在发表论文、报告研究成果时&#xff0c;大多选…
阅读更多...
ChatGPT高效提问—prompt实践（教师助手）

ChatGPT高效提问—prompt实践（教师助手）

ChatGPT高效提问—prompt实践&#xff08;教师助手&#xff09; 下面来看看ChatGPT在教育领域有什么用途。 首先设定ChatGPT的角色为高中教师助手。 输入prompt: ChatGPT输出&#xff1a; ​ 教师助手的角色已经设置完成。下面通过几种不同的情景演示如何使用。 1.1.1 制定…
阅读更多...
2001-2022年368个地级市平均气温数据

2001-2022年368个地级市平均气温数据

2001-2022年368个地级市平均气温数据 1、时间:2001-2022年 2、范围&#xff1a;368个地级市 3、来源&#xff1a;基于NOAA下属NCEI提供的原始数据编制而成的。 4、指标&#xff1a;年份、省份、省份代码、城市、城市代码、平均气温 5、指标解释&#xff1a;平均气温指某一…
阅读更多...
【JavaEE】_JavaScript（Web API）

【JavaEE】_JavaScript（Web API）

目录 1. DOM 1.1 DOM基本概念 1.2 DOM树 2. 选中页面元素 2.1 querySelector 2.2 querySelectorAll 3. 事件 3.1 基本概念 3.2 事件的三要素 3.3 示例 4.操作元素 4.1 获取/修改元素内容 4.2 获取/修改元素属性 4.3 获取/修改表单元素属性 4.3.1 value&#xf…
阅读更多...
机器学习、深度学习、强化学习、迁移学习的关联与区别

机器学习、深度学习、强化学习、迁移学习的关联与区别

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要了解并初步探究机器学习、深度学习、强化学习、迁移学习的关系与区别&#xff0c;通过清晰直观的关系图展现出四种“学习”之间的关系。虽然这四种“学习”方法在理论和应用上存在着一定的区别&#xff0c;但它们之间也…
阅读更多...
FreeRTOS 队列管理

FreeRTOS 队列管理

概览 基于 FreeRTOS 的应用程序由一组独立的任务构成——每个任务都是具有独立权 限的小程序。这些独立的任务之间很可能会通过相互通信以提供有用的系统功能。 FreeRTOS 中所有的通信与同步机制都是基于队列实现的。 本章期望让读者了解以下事情 　 如何创建一个队列 　 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023