第二十九章 Vue之插槽

目录

一、引言

二、默认插槽

2.1. 默认插槽基本语法

2.2. 完整代码 

2.2.1. main.js

2.2.2. App.vue

2.2.3. MyDialog.vue

2.3. 运行效果

三、插槽后备内容(默认值)

3.1. 插槽后备内容基本语法

3.2. 完整代码 

3.2.1. main.js

3.2.2. App.vue

3.2.3. MyDialog.vue

3.3. 运行效果

四、具名插槽

4.1. 具名插槽语法

4.2. 完整代码 

4.2.1. main.js

4.2.2. App.vue

4.2.3. MyDialog.vue

五、作用域插槽 

5.1. 作用域插槽语法

5.2. 完整代码 

​5.2.1. main.js

5.2.2. App.vue 

5.2.3. MyTable.vue 


一、引言

如下图所示的两个对话框,除了内部的提示语信息内容有一些差异外,其他部分完全相同。这种情况下我们可以将对话框相同公用的部分抽取封装成一个组件,内部的会变动的提示语信息(组件的内容)通过插槽进行定制化传入参数,从而实现组件的复用。

插槽作用:让组件内部的一些结构支持自定义。

二、默认插槽

2.1. 默认插槽基本语法

1. 组件内需要定制的结构部分,改用<slot></slot>占位

2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

2.2. 完整代码 

2.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

2.2.2. App.vue

<template><div><!-- 2. 在使用组件时,组件标签内填入内容 --><MyDialog><div>你确认要删除么</div></MyDialog><MyDialog><p>你确认要退出么</p></MyDialog></div>
</template><script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script><style>
body {background-color: #b3b3b3;
}
</style>

2.2.3. MyDialog.vue

<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><!-- 1. 在需要定制的位置,使用slot占位 --><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>

2.3. 运行效果

三、插槽后备内容(默认值)

3.1. 插槽后备内容基本语法

我们通过插槽实现内容的定制,同时插槽还支持设定默认的内容,即插槽后备内容。我们在封装组件时,可以为预留的`<slot>` 插槽提供后备内容(默认内容)。

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

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

3.2. 完整代码 

3.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

3.2.2. App.vue

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

3.2.3. 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>

3.3. 运行效果

四、具名插槽

前面我们讲的默认插槽,它只支持组件内只有一处内容不同需要自定义的情况。但我们在实际开发过程中经常会碰到组件中有多处内容不同需要自定义,这时我们可以使用具名插槽来实现。

下面的提示框我们可以看到除了提示语不同外,提示框的标题也不同:

4.1. 具名插槽语法

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

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

4.2. 完整代码 

4.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

4.2.2. App.vue

<template><div><MyDialog><!-- 需要通过template标签包裹需要分发的结构,包成一个整体 --><template v-slot:head><div>我是大标题</div></template><template v-slot:content><div>我是内容</div></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>

4.2.3. MyDialog.vue

<template><div class="dialog"><div class="dialog-header"><!-- 一旦插槽起了名字,就是具名插槽,只支持定向分发 --><slot name="head"></slot></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>

五、作用域插槽 

我们在企业级项目开发过程中,经常会碰到PC端管理后台中有些列表的列头和列题在不同的条件下会动态的变更,以外的开发实现上可能会使用判断条件语句来实现,如果动态变更的种类条件很多的情况下,代码就会相当复杂和冗余。另外还有列表中最右侧列,有些全是查看按钮,有些全是删除按钮。在Vue中,这些需求通过作用域插槽实现起来就非常简洁。

使用具名插槽结合作用域插槽实现动态表格:

 使用默认插槽结合作用域插槽实现动态操作按钮:

注意:作用域插槽并不是插槽的一个种类,插槽只有默认插槽和具名插槽两种。作用域插槽它是插槽的一种传参语法。

作用域插槽的意思是在定义 slot 插槽的时候, 我们还可以传值。给插槽上可以绑定数据,将来使用组件时可以用。

如下的场景需求:封装表格组件

5.1. 作用域插槽语法

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

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

3. 在父组件的template中, 通过 ` #插槽名= "obj" ` 接收子组件中插槽的传值,默认插槽名为default

5.2. 完整代码 

 5.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

5.2.2. App.vue 

<template><div><MyTable :data="list"><!-- 3. 通过template #插槽名="变量名" 接收 MyTable插槽的传参,传过来的参数是个如下形式的obj --><!-- {row: { id: 2, name: '孙红雷', age: 19 },msg: '测试文本'} --><template #default="obj"><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><!-- { row } 为直接从obj从解构出来的对象 --><template #default="{ row }"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'
export default {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 },]}},methods: {del (id) {this.list = this.list.filter(item => item.id !== id)},show (row) {// console.log(row);alert(`姓名:${row.name}; 年纪:${row.age}`)}},components: {MyTable}
}
</script>

5.2.3. 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. 将所有的属性,添加到一个对象中 --><!-- {row: { id: 2, name: '孙大明', age: 19 },msg: '测试文本'}--></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>

 

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

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

相关文章

宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

一、概述 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记、查询&#xff0c;宠物领养登记、查询&#xff0c; 宠物领养预约管理、货品进出库库存管理于一体的综合管理系统软件。 概述&#xff1a; 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记…

【ESP32+MicroPython】开发环境部署

本教程将指导你如何在Visual Studio Code&#xff08;VSCode&#xff09;中设置ESP32的MicroPython开发环境。我们将涵盖从安装Python到烧录MicroPython固件的整个过程&#xff0c;以及如何配置VSCode以便与ESP32进行交互。 准备工作 安装Python 确保你的计算机上安装了Pyth…

前端Nginx的安装与应用

目录 一、前端跨域方式 1.1、CORS(跨域资源共享) 1.2、JSONP(已过时) 1.3、WebSocket 1.4、PostMessage 1.5、Nginx 二、安装 三、应用 四、命令 4.1、基本操作命令 4.2、nginx.conf介绍 4.2.1、location模块 4.2.2、反向代理配置 4.2.3、负载均衡模块 4.2.4、通…

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…

小白直接冲!BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测

小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测 目录 小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测效果一览基本介绍程序设计参考资料 效果一…

论文概览 |《IJGIS》2024.09 Vol.38 issue9

本次给大家整理的是《International Journal of Geographical Information Science》杂志2024年第38卷第9期的论文的题目和摘要&#xff0c;一共包括9篇SCI论文&#xff01; 论文1 A movement-aware measure for trajectory similarity and its application for ride-sharing …

青少年编程能力等级测评CPA Python编程(一级)

青少年编程能力等级测评CPA Python编程(一级) &#xff08;考试时间90分钟&#xff0c;满分100分&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; 下列语句的输出结果是&#xff08; &#xff09;。 print(35*2) A&a…

Linux网络命令:它用于实时监控网络接口的状态变化的命令 ip monitor详解

目录 一、概述 二、使用 1、语法 2、对象类型 3、常用选项 4、获取帮助 三、 示例 1. 监视链路层变化 2. 监视所有的网络变化 3. 仅监视路由表的变化 4. 监视特定网络接口的状态变化&#xff1a; 5. 监视网络接口地址的变化 四、实际应用 五、其他事项 一、概述 …

从APP小游戏到Web漏洞的发现

一、前因&#xff1a; 在对一次公司的一个麻将游戏APP进行渗透测试的时候发现&#xff0c;抓到HTTP请求的接口&#xff0c;但是反编译APK后发现没有在本身发现任何一个关于接口或者域名相关的关键字&#xff0c;对此感到了好奇。 于是直接解压后everything搜索了一下&#xff…

【JavaSE】(2) 方法

一、认识方法 1. 方法的定义 修饰符 返回类型 方法名(形参类型 形参名, ......){......return 返回值; } 示例代码&#xff1a; 2. 方法的作用 增强代码的可复用性。&#xff08;避免重复造轮子&#xff09;增强代码的易管理性。&#xff08;改方法就行&#xff0c;不用到处…

柯桥零基础学日语日语培训中为什么不说「ご客様」而是「お客様」?

宝子们是不是经常会看到&#xff0c;很多日语单词前面都有假名「お」或「ご」。 但是又总弄不明白为什么要用「お」、「ご」&#xff0c;用哪个更合适&#xff1f; 今天我们就来好好地扒一扒吧~ 在日语中「お・ご」这样的接头词很常见&#xff0c;一般用来表示美化。 美化语的…

【Linux】简易版shell

文章目录 shell的基本框架PrintCommandLineGetCommandLineParseCommandLineExecuteCommandInitEnvCheckAndExecBuildCommand代码总览运行效果总结 shell的基本框架 要写一个命令行我们首先要写出基本框架。 打印命令行获取用户输入的命令分析命令执行命令 基本框架的代码&am…

Git 概述及相关命令(1)

Git概述 Git是一个强大的分布式版本控制系统&#xff0c;广泛用于代码管理和协作开发。 仓库&#xff08;Repository&#xff09;: 存储项目文件及其历史记录的地方&#xff0c;分为本地仓库和远程仓库。工作区&#xff08;Working Directory&#xff09;: 用户当前工作文件所…

Java栈和队列的快速入门

栈和队列 一、栈 Stack1、概念2、基本操作3、常用方法4、举例5、分析 二、队列1、概念2、常用方法3、举例4、分析&#xff1a; 三、力扣算法快速入门232. 用栈实现队列225. 用队列实现栈 感谢 一、栈 Stack 1、概念 在 Java 中&#xff0c;栈&#xff08;Stack&#xff09;是…

docker 可用镜像服务地址(2024.10.31亲测可用)

1.错误 Error response from daemon: Get “https://registry-1.docker.io/v2/” 原因&#xff1a;镜像服务器地址不可用。 2.可用地址 编辑daemon.json&#xff1a; vi /etc/docker/daemon.json内容修改如下&#xff1a; {"registry-mirrors": ["https://…

【MySQL】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …

临街矩阵乘以自己转置的含义

总结: 临街矩阵* 邻接矩阵转置的(i,j) 位置表示有多少种线路从元素A跳转一条边最终落到元素j的路线. 这个也叫1_degree.

A010-基于SpringBoot的宠物健康咨询系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

DP3复现基础知识(一)—— Hydra 库

DP3 无论是 train 还是 eval 均使用了 Hydra 这一个python 库&#xff0c;这就有些代码在看的时候难以理解其通讯逻辑&#xff0c;例如&#xff1a; hydra.main(version_baseNone,config_pathstr(pathlib.Path(__file__).parent.joinpath(diffusion_policy_3d, config)) ) Hy…

记单词,不要迷信一种方法

记单词&#xff0c;不要迷信一种方法。因为&#xff0c;记单词的目的&#xff0c;就是记住单词呀。 哪一种方法能让你记住&#xff0c;快速、高效、长久地记住&#xff0c;你就使用哪种方法&#xff1b;而且&#xff0c;方法和方法之间&#xff0c;不见得是矛盾的呀。 我们举个…