前端学习--vue2--插槽

写在前面:
这个用法是在使用组件和创建组件中

文章目录

  • 介绍
  • 简单使用
  • 多个插槽
  • 省写
  • 默认/后备内容
  • 作用域插槽
  • 常用实例
    • Element-ui的el-table
  • 废弃用法
    • slot attribute
    • slot-scope attribute

介绍

我们在定义一些组件的时候,由于组件内文字想要自定义,而子和父是隔离的,所以就有了这样的需求,我们可以选用插槽来达到这样的效果

作用:让组件内部的结构支持自定义

简单使用

组件内部用slot占位
在SlotStudy组件,这里只是简单演示,组件定义了一个a标签,a的文字自定义。
在这里插入图片描述
父组件使用就是
在这里插入图片描述
效果
在这里插入图片描述

多个插槽

这样的默认插值是只能自定义一个位置的
如果想要多个的话我们想要指定name
子组件

<template><div><a><slot></slot></a><el-divider><slot name="title"></slot></el-divider></div>
</template>

父组件
v-slot:xx也提供了一个可以省写的#xx,效果是一样的。

<template><slot-study><template v-slot:default>slot插槽默认使用</template><template #title>指定name使用</template></slot-study>
</template>

效果
在这里插入图片描述

省写

v-slot:可以写成# ,在多个提到过

默认/后备内容

在子组件中如果一个自定义的地方一定想要传入内容,那么我们可以采用默认的方式来
子组件

    <el-divider><slot name="de">slot插槽默认使用</slot></el-divider>

父组件

      <template #de></template>

效果
在这里插入图片描述

作用域插槽

父子组件通过插槽传值的工具
如这样一个表格
在这里插入图片描述

我想通过删除按钮来删除这一行,就可以通过这个作用域插槽实现了

子组件
这里除了定义外,还使用了插槽获取这一行的数据
通过default来获取这一行的对象
然后将这一行的数据传递下去。

      <el-table-column label="操作"><template #default="scope"><slot :row="scope.row" :sss="'附带格外信息'"></slot></template></el-table-column>

父组件

    <slot-study :tables="tables"><template #default="obj"><button @click="remove(obj)">删除</button></template></slot-study>remove(val){console.log('删除',val)}

点击后的效果。

在这里插入图片描述

常用实例

Element-ui的el-table

当我们在element-ui想要替换渲染逻辑的时候,可以用插槽来

如在不同状态的时候展示不同的表格效果,那么我们可以

        <el-table-columnlabel="同步状态"><template v-slot:default="scope"><i :class="{'el-icon-loading':scope.row.status === 0}"/><div :class="scope.row.status | tc">{{ statuss[scope.row.status] }}</div></template></el-table-column>

通过插槽进行逻辑判断
最终呈现出不同的效果
在这里插入图片描述

格外的如果是用for循环来的<el-table-column,我们可以通过判断来进行指定单元格的渲染。
如下面案例
在tocrm的单元列的时候,进行格外的按钮渲染,其他框则是直接展示

      <el-table-columnv-for="column in columns":key="column.prop":prop="column.prop":label="column.label":width="column.width"><template v-slot:default="scope"><span v-if="column.prop === 'tocrm'"><span><el-switch v-model="scope.row.tocrm" @change="updateCRM(scope.row)"/></span></span><span v-else>{{ scope.row[column.prop] }}</span></template></el-table-column>

注意,如果用了插槽就无法进行备用/默认插槽了,就会出现没用内容的清空
在这里插入图片描述

废弃用法

slot attribute

直接使用特殊属性的 slot

<template><slot-study><template>slot插槽默认使用</template><template slot="title">指定name使用</template></slot-study>
</template>

slot-scope attribute

slot-scope特殊属性
作用就是作用域插槽的作用

    <slot-study :tables="tables"><template slot-scope="obj" slot="default"><button @click="remove(obj)">删除</button></template></slot-study>remove(val){console.log('删除',val)}

如果错误和补充,欢迎指出和补充

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

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

相关文章

python脚本记日志

1、使用RotatingFileHandler&#xff0c;可以实现日志按大小回滚&#xff08;设置&#xff0c;最多备份几个日志文件&#xff0c;每个日志文件最大值&#xff09;&#xff1a; import loggingfrom logging.handlers import RotatingFileHandler # 按文件大小回滚handlerdef ma…

ssh安全远程管理

目录 1、什么是ssh 2、ssh登陆 3、ssh文件传输 1、什么是ssh ssh是 Secure Shell 的缩写&#xff0c;是一个建立在应用层上的安全远程管理协议。ssh 是目前较为可靠的传输协议&#xff0c;专为远程登录会话和其他网络服务提供安全性。利用ssh 协议可以有效防止远程管理过程中…

蓝桥杯上岸每日N题 第五期(山)!!!

蓝桥杯上岸每日N题第五期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯Java 省赛B组(初赛)填空题 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数第3天 ❗️ ❗️ ❗️ 还没背熟模…

机器学习笔记之优化算法(二)线搜索方法(方向角度)

机器学习笔记之优化算法——线搜索方法[方向角度] 引言回顾&#xff1a;线搜索方法从方向角度观察线搜索方法场景构建假设1&#xff1a;目标函数结果的单调性假设2&#xff1a;屏蔽步长 α k \alpha_k αk​对线搜索方法过程的影响假设3&#xff1a;限定向量 P k \mathcal P_k …

git 命令总结

一、本地分支和仓库里的分支不同步&#xff08;本地看不到最新的分支&#xff09; 1.使用 git fetch origin 或者git remote update origin --prune命令更新 2.git branch -r 查看 即可 二、git 合并代码 1. git 如何把分支代码合并到master 1.1 首先切换到分支 git checkou…

leetcode做题笔记48

给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 思路一&#xff1a;直接旋转 void rotate(int** matrix, int matrixSize, int…

0基础学习VR全景平台篇 第76篇:全景相机-圆周率全景相机如何直播推流

圆周率科技&#xff0c;成立于2012年&#xff0c;是中国最早投身嵌入式全景算法研发的团队之一&#xff0c;亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One&#xff0c;为用户带来实时畅享8K的高清…

PyTorch代码实战入门

人这辈子千万不要马虎两件事 一是找对爱人、二是选对事业 因为太阳升起时要投身事业 太阳落山时要与爱人相拥 一、准备数据集 蚂蚁蜜蜂数据集 蚂蚁蜜蜂的图片&#xff0c;文件名就是数据的label 二、使用Dataset加载数据 打开pycharm&#xff0c;选择Anaconda创建的pytorch环…

[Vue3] 基础面试 (一)

文章目录 1.Vue 3相对于Vue 2有哪些主要改进2.Vue 3中如何处理组件的Props3.Vue 3中的Composition API是什么, 它与Options API有何不同4.Vue 3中的响应式数据是如何工作的5.Vue 3中的ref和reactive有何区别6.Vue 3中的watchEffect和watch有何区别 1.Vue 3相对于Vue 2有哪些主要…

医疗流程自动化盛行,RPA成为医疗保健行业的重点应用技术

随着我们进入新的科技纪元&#xff0c;机器人流程自动化&#xff08;RPA&#xff09;正快速地改变着我们的游戏规则。简单来说&#xff0c;RPA 就是模仿人类与电子系统的互动&#xff0c;自动化执行重复性的任务和操作序列。 医疗保健领域中&#xff0c;RPA 的应用具备巨大的潜…

《工具箱-VNCServer》配置VNCServer,使用VNCViewer实现局域网内页面共享

VNCServer设置 通过VNCServer配置&#xff0c;与VNCviewer配套使用 1.下载并安装VNCServer 2.邮箱密码注册后用户登录 3.设置VNC密码 4.设置viewer不能控制本机 5.打开VNClicensewiz&#xff0c;选择“Enter a license key …” BQ24G-PDXE4-KKKRS-WBHZE-F5RCA BQ24G-PDXE4-…

vue如何实现打字机效果

参考插件&#xff1a;easy-typer-jshttps://redqueen.gitee.io/typer/#%E7%89%B9%E7%82%B9%EF%BC%88%E4%BC%98%E5%8A%BF%EF%BC%89 或者&#xff1a;vue-type-js 或者要的是chartgpt&#xff1a;效果的&#xff1a; https://blog.csdn.net/yasinshaw/article/details/1298073…

Java中集合容器详解:简单使用与案例分析

目录 一、概览 1.1 Collection 1. Set 2. List 3. Queue 1.2 Map 二、容器中的设计模式 迭代器模式 适配器模式 三、源码分析 ArrayList 1. 概览 2. 扩容 3. 删除元素 4. 序列化 5. Fail-Fast Vector 1. 同步 2. 扩容 3. 与 ArrayList 的比较 4. 替代方案…

服务器介绍

本文章转载与b战up主谈三国圈&#xff0c;仅用于学习讨论&#xff0c;如有侵权&#xff0c;请联系博主 机架型服务器 堆出同时服务百万人次机组 刀型服务器 服务器炸了 比如用户访问量暴增 超过机组的峰值处理能力&#xff0c;进而导致卡顿或炸服&#xff0c; 适合企业的塔式…

同样是跨端框架,React会不会被VUE取代?

看到知乎上有比较多的类似问题&#xff0c;正好这两个框架在以往的一些项目中都有实践过&#xff0c;就借着本篇文章说说我个人的看法。 先摆个结论&#xff1a;不会&#xff0c;毕竟各有千秋&#xff0c;除非跨端框架有被更好的概念所替代&#xff0c;又或者App已经彻底过气了…

es6中的Map和Set数据结构

Map Map对象可以用于保存键值对 1.创建 一个Map对象 const map new Map() 2.Map的一些方法 set(key,value):通过键值对向Map对象中添加元素get(key):通过建拿到对应的值size:返回Map对象中所包含的键值对的个数has(key):判断Map对象中是否有对应的key&#xff0c;返回一个…

Pandas进阶修炼120题-第三期(金融数据处理,51-80题)

目录 往期内容&#xff1a;第一期&#xff1a;Pandas基础&#xff08;1-20题&#xff09;第二期&#xff1a;Pandas数据处理&#xff08;21-50题&#xff09; 第三期 金融数据处理51.使用绝对路径读取本地Excel数据方法一&#xff1a;双反斜杠绝对路径方法二&#xff1a;r 拓展…

【Docker】Docker安装Kibana服务_Docker+Elasticsearch+Kibana

文章目录 1. 什么是Kibana2. Docker安装Kibana2.1. 前提2.2. 安装Kibana 点击跳转&#xff1a;Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套&#xff08;质量有保证&#xff0c;内容详情&#xff09; 1. 什么是Kibana Kibana 是一款适用于Elasticse…

Java三大特征之继承【超详细】

文章目录 一、继承概念二、继承的语法三、父类成员访问3.1子类中访问父类的成员变量3.2子类和父类成员变量同名3.3子类中访问父类的成员方法 四、super关键字五、子类构造方法六、super和this七、再谈初始化八、protected 关键字九、继承方式十、final 关键字十一、继承与组合 …

C++学习day--18 空指针和函数指针、引用

1、void 类型指针 void > 空类型 void* > 空类型指针&#xff0c; 只存储地址的值&#xff0c;丢失类型&#xff0c;无法访问&#xff0c;要访问其值&#xff0c;我们必须对这个指 针做出正确的类型转换&#xff0c;然后再间接引用指针 。 所有其它类型的指针都可以隐…