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. 安…
阅读更多...
不关电脑不仅仅是因为懒

不关电脑不仅仅是因为懒

程序员为什么不喜欢关电脑&#xff1f;不管用台式机&#xff0c;还是笔记本&#xff0c;总有一批程序员下班后从不关闭电脑&#xff0c;台式机按掉屏幕电源&#xff0c;笔记本直接合上休眠就是了。 这种现象说明这些程序员懒吗&#xff1f;还是有其它原因&#xff1f;从我自身的…
阅读更多...
【网络层介绍】

【网络层介绍】

文章目录 一、网络层概述1. 网络层的作用2. 网络层与其他层的关系 二、核心协议和技术1. IP协议2. 路由和转发3. 子网划分和超网 三、网络层设备1. 路由器2. 三层交换机 一、网络层概述 1. 网络层的作用 网络层主要负责在不同网络间传输数据包&#xff0c;确保数据能够跨越多…
阅读更多...
在python中JSON数据格式的使用

在python中JSON数据格式的使用

什么是JSON&#xff1f; JSON是一种数据格式&#xff0c;由美国程序设计师DouglasCrockford创建的&#xff0c;JSON全名是JavaScript Object Notation,由JSON英文全文字义我们可以推敲JSON的缘由&#xff0c;最初是为JavaScript开发的。这种数据格式由于简单好用被大量应用在We…
阅读更多...
Rust Option类型详解

Rust Option类型详解

在Rust中&#xff0c;Option是一种枚举类型&#xff0c;用于表示一个可能有值&#xff0c;也可能为空&#xff08;None&#xff09;的情况。它是Rust中对于空值安全处理的一种方式&#xff0c;与其他语言中的null或undefined相比&#xff0c;Option提供了更安全、更明确的方式来…
阅读更多...
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;未安装的可以参考我之前的博客有将如何安装。同时默…
阅读更多...
中科星图GVE（AI案例）——AI影像进行超分案例

中科星图GVE（AI案例）——AI影像进行超分案例

简介 超分辨率图像处理是一种通过增加图像的空间分辨率来提高图像质量的技术。传统的超分辨率算法主要基于插值和滤波方法，然而这些方法往往无法准确恢复丢失的高频细节，导致图像出现模糊或失真。近年来，基于人工智能的超分辨率算法得到了广泛的关注和研究。下面将介绍AI影…
阅读更多...
【开源】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可以做到资源的精细度划分。 对于磁盘…
阅读更多...
ModuleNotFoundError: No module named ‘_bz2‘

ModuleNotFoundError: No module named ‘_bz2‘

今天装了py3.11&#xff0c;但是在导入pandas的时候出现了以下错误&#xff1a; from _bz2 import BZ2Compressor, BZ2Decompressor ModuleNotFoundError: No module named _bz2很显然缺少了依赖包&#xff0c;可以用 yum install bzip2进行安装&#xff0c;安装之后发现还是…
阅读更多...
嵌入式软件设计入门：从零开始学习嵌入式软件设计

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

&#xff08;本文为简单介绍&#xff0c;个人观点仅供参考&#xff09; 首先,让我们了解一下嵌入式软件的定义。嵌入式软件是指运行在嵌入式系统中的特定用途软件,它通常被用来控制硬件设备、处理实时数据和实现特定功能。与桌面应用程序相比,嵌入式软件需要具备更高的实时性、…
阅读更多...
C++ //练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢？解释原因。

C++ //练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢？解释原因。

C Primer&#xff08;第5版&#xff09; 练习 7.5 练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢&#xff1f;解释原因。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 姓名大概…
阅读更多...
反无人机系统技术分析，无人机反制技术理论基础，无人机技术详解

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

近年来&#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;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。…
阅读更多...
RabbitMQ——构建高性能消息传递的应用

RabbitMQ——构建高性能消息传递的应用

前言 大家好&#xff0c;我是chowley&#xff0c;说到消息队列&#xff0c;在我之前的生产者-消费者项目中使用的是ConCurrentLinkedList结构&#xff0c;今天来总结一下主流的消息队列实现——RabbitMQ。 RabbitMQ 是一个开源的消息代理软件&#xff0c;最初由 Rabbit Techn…
阅读更多...
最新文章

Copyright @ 2022~2023