插槽(64-67)

文章目录

  • 插槽
    • 1.插槽 - 默认插槽(组件内可以定制一处结构)
    • 2.插槽 - 后备内容(默认值)
    • 3.插槽 - 具名插槽(组件内可以定制多处结构)
    • 4.作用域插槽(插槽的一个传参语法)

插槽

插槽分类:默认插槽和具名插槽

1.插槽 - 默认插槽(组件内可以定制一处结构)

作用:让租价内部的一些结构支持自定义
需求:要在页面中显示一个对话框,封装成一个组件
问题:组件的内容部分,不希望写死,希望能够使用的时候自定义怎么办?(插槽)

在这里插入图片描述
插槽的基本语法:

  1. 组件内需要定制的结构部分,改用<slot></slot>
  2. 使用组件时,<MyDialog></MyDialog>内部标签,传入结构替换slot
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3></div><div class="dialog-content"><slot></slot>//用slot占位  //<MyDialog>你去确定要退出本系统吗</div>							<MyDialog>	//会被填入slot位置<div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>
App.vue
<template><div><!-- 在我们使用组件时,在组建标签内填入内容 --><MyDialog>你确认要删除吗</MyDialog><MyDialog>你确认要退出吗</MyDialog></div>
</template>~.vue
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><!-- 在需要定制的位置,使用slot占位 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>

2.插槽 - 后备内容(默认值)

前言:通过插槽完成了内容的定制,传什么显示什么,但是如果不传,则是空白
插槽的后备内容:封装组件时,可以为预留的```插槽提供后备内容(默认内容)

语法:在<slot>标签内,防止内容,作为默认内容

3.插槽 - 具名插槽(组件内可以定制多处结构)

需求:一个组件内有多处结构,需要外部传入标签。进行定制
默认插槽:一个的定制位置

具名插槽语法:

  1. 多个slot使用name属性区分名字
    在这里插入图片描述
  2. template配合v-slot名字来分发对应的标签
    在这里插入图片描述
  3. v-slot:插槽名 可以简化成 #插槽名
    在这里插入图片描述

4.作用域插槽(插槽的一个传参语法)

作用域插槽:定义 slot 插槽的同时,是可以传值的.给插槽上可以绑定数据,将来使用组件时可以用
场景:封装表格组件(表格长得一样,但是数据不一样)
在这里插入图片描述
在这里插入图片描述

  1. 通过父传子,将数据传递进去,动态渲染表格内容
  2. 利用默认插槽定制操作这一列
  3. 删除或查看都需要用到 当前的id ,属于 组件内部的数据,通过作用域插槽 传值绑定,进而使用

基本使用步骤:

  1. slot标签,以添加属性的方式传值
    在这里插入图片描述
  2. 所有添加的属性,都会被收集到一个对象中
    在这里插入图片描述
  3. template.同股票 #插槽名="obj"接收(这个obj``是一个局部变量,我们可以起成不同的名字),默认插槽名为default`
    在这里插入图片描述
App.vue
<template><div><MyTable :data="list"><template #default="obj"><!--通过template #插槽名="变量名"接收--><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><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.loh(row)alert(`姓名: ${row.name}; 年纪: ${row.age}`)}},components: {MyTable}
}
</script>~.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><!--苛以在插槽的位置传参,方便删除del()--><!-- 2.将所有属性,添加到一个对象中 --><!--{row:{id:2,name:'孙大明',age:19},msg:'测试文本'}--></td></tr></tbody></table>
</template><script>
export default {props: {data: Array,},
}
</script>

在这里插入图片描述

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

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

相关文章

qt学习:http+访问百度智能云api实现动物图片识别

目录 获取id key 编程步骤 配置ui界面 添加模块,头文件和定义变量 新建两个类,一个图像Image类,一个Http类,http类继承QObject类,并添加头文件并定义成员和函数 实现图像Image类,Http类的函数 在ui界面的cpp中添加全局变量,根据自己的应用来写,开头有获取方法

Java解决ReabbitMQ解决消息重复消费问题

RabbitMQ中解决消息重复消费的问题通常涉及到确保消息的幂等性和使用消息确认机制。以下是一些常见的解决方法&#xff1a; 消息去重&#xff1a;在消费者端实现消息的去重逻辑&#xff0c;例如使用数据库的唯一约束或者分布式锁来保证同一消息不会被处理多次。 消息确认&…

【投稿优惠|EI优质会议】2024年材料化学与清洁能源国际学术会议(IACMCCE 2024)

【投稿优惠|优质会议】2024年材料化学与清洁能源国际学术会议(IACMCCE 2024) 2024 International Conference Environmental Engineering and Mechatronics Integration(ICEEMI 2024) 一、【会议简介】 随着全球能源需求的不断增长&#xff0c;清洁能源的研究与应用成为了国际…

【npm包】如何发布自己的npm包

随着Node.js的普及&#xff0c;npm&#xff08;Node Package Manager&#xff09;已成为JavaScript开发者中不可或缺的一部分。发布自己的npm包&#xff0c;不仅可以将自己的项目分享给更多人&#xff0c;还可以为社区做出贡献。本文将详细介绍如何从零开始发布自己的npm包。 …

【JavaEE Spring】MyBatis 操作数据库 - 进阶

MyBatis 操作数据库 - 进阶 1. 动态SQL1.1 \<if>标签1.2 \<trim>标签1.3 \<where>标签1.4 \<set>标签1.5 \<foreach>标签1.6 \<include>标签 1. 动态SQL 动态 SQL 是Mybatis的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接…

想找一个轻量版的MarkDown编辑器客户端,哪位推荐一下

经常需要即时写一些MarkDown文档&#xff0c;打开网页版的笔记不方便。 对比了几个&#xff0c;已收费的typora感觉还是最好的。 除此之外&#xff0c;原以为最重的VSCode&#xff0c;从打开速度、占内存等情况来说&#xff0c;居然也不相上下。 这样的对比条件下&#xff0c;…

某赛通电子文档安全管理系统 hiddenWatermark/uploadFile 文件上传漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

常用命令-

Linux服务器命令 scp -P 1122 expdp_aram_prod230903_* root193.8.1.7:/oracle/app/oracle/move_data //跨服务器传输 chown -R oracle:oinstall /app/move_data //更改所属组 date -s 2022-11-11 18:58:30 //修改服务器时间 top //CPU使用率 df -h //磁盘…

趋势也有大小之分?现货白银趋势的简单介绍

在现货白银市场中要做顺势交易&#xff0c;首先要分析趋势&#xff0c;在这一步很多投资者懵逼了&#xff0c;因为有时他们搞不清当前趋势是什么&#xff0c;看起来像下跌&#xff0c;但又像上涨。其实这可能是投资者没搞清楚大趋势和小趋势的关系问题&#xff0c;下面我们就来…

数据结构——链表的实现(Java版)

目录 一、链表 二、代码实现 1.创建结点 2.构造函数 3.链表的相关属性 4.添加虚拟节点 5.判断链表是否为空 6.添加方法 &#xff08;1&#xff09;在头部添加 &#xff08;2&#xff09;在尾部添加 &#xff08;3&#xff09;在索引位置添加 &#xff08;4&#xff…

华为云OBS-文件上传

前端配合后端 采用临时上传 相关参考文档 使用临时URL进行授权访问_对象存储服务 OBS_BrowserJS_临时授权访问_华为云 选择文件方法 【 isPay 是否上传完毕】 handleChange(file, fileList) {this.active 0;this.json_data [];console.log(file, fileList);fileList.forEa…

LiveGBS流媒体平台GB/T28181常见问题-如何配置使用自己已有的redis服务替换redis版本升级redis版本

LiveGBS如何配置使用自己已有的redis服务替换redis版本升级redis版本 1、Redis服务2、如何切换REDIS?2.1、停止启动REDIS2.2、配置信令服务2.3、配置流媒体服务2.4、启动 3、搭建GB28181视频直播平台 1、Redis服务 在LivGBS中Redis作为数据交换、数据订阅、数据发布的高速缓存…

Java二分查找-图文

一、二分查找概念 二分查找也叫折半查找&#xff0c;是在一组有序(升序/降序)的数据中查找一个元素&#xff0c;它是一种效率较高的查找方。 二、二分查找原理 1.二分查找的数组必须是有序数值型数组。 2.将想要查找的目标元素与查找范围内的中间元素进行比较&#xff0c;如果…

数据结构篇-01:单调栈

单调栈是栈的一种&#xff0c;可以使得每次新元素入栈后&#xff0c;栈内的元素都保持有序&#xff08;单调递增或者单调递减&#xff09;。 单调栈的用途不太广泛&#xff0c;只处理一类典型的问题&#xff0c;比如[下一个更大元素]、[上一个更小元素] 等。 在本文中&#x…

Pandas应用-股票分析实战

股票时间序列 时间序列&#xff1a; 金融领域最重要的数据类型之一 股价、汇率为常见的时间序列数据 趋势分析&#xff1a; 主要分析时间序列在某一方向上持续运动 在量化交易领域&#xff0c;我们通过统计手段对投资品的收益率进行时间序列建模&#xff0c;以此来预测未来的收…

六、VTK创建平面vtkPlaneSource

vtkPlaneSource创建位于平面中的四边形数组 先看看效果图: vtkPlaneSource 创建一个 m x n 个四边形数组,这些四边形在平面中排列为规则平铺。通过指定一个原点来定义平面,然后指定另外两个点,这两个点与原点一起定义平面的两个轴。这些轴不必是正交的 - 因此您可以创建平行…

css3表格练习

1.效果图 2.html <div class"line"></div><h3>获奖名单</h3><!-- 表格 cellspacing内边距 cellpadding外边距--><table cellspacing"0" cellpadding"0" ><!-- thead表头 --><thead><tr>…

蓝桥杯备战——6.串口通讯

1.分析原理图 由上图我们可以看到串口1通过CH340接到了USB口上&#xff0c;通过串口1我们就能跟电脑进行数据交互。 另外需要注意的是STC15F是有两组高速串口的&#xff0c;而且可以切换端口。 2.配置串口 由于比赛时间紧&#xff0c;我们最好不要去现场查寄存器手册&#x…

【搞懂设计模式】享元模式:共享节约,皆大欢喜!

什么是享元模式&#xff1f; 巧记&#xff1a;共享节约&#xff0c;皆大欢喜。 总结&#xff1a;享元模式是一种结构型设计模式&#xff0c;它通过共享技术有效地支持大量细粒度的对象。想象一个大家庭的餐桌&#xff0c;一顿饭需要的碗筷&#xff0c;如果每个人都自己带一套…

第七十一周周报

学习目标&#xff1a; 一、实验 二、小程序 学习时间&#xff1a; 2024.1.20-2024.1.26 学习产出&#xff1a; 一、小程序 这周花了两天根据陈勇和纪行之的代码优化了小程序的代码 二、实验 根据stylegan2仓库的redeme文件重新跑了stylegan2和diffusion-stylegan2 DV…