Vue 插槽 slot-scope=scope

news/2025/3/31 9:54:14/文章来源:https://www.cnblogs.com/emanlee/p/18355751

 

===============================

===============================

默认插槽

只有一个slot

 

 

 

 

具名插槽

当有多个slot时,每个slot有名字的插槽(name)

 

 只有template才能用v-slot 【这个是新设计的技术 Vue2.6以后用的】

 

作用域插槽

反向传数据

 

App.vue中,必须用 template

数据从Category.vue 反向传给了App.vue的atguigu

一般是从 App.vue 给 Category.vue 传值。

 

 

 

 

 

===============================

Vue  slot-scope="scope"

 

 

status状态值为0就是代办,为1就是处置,为2就是完成

此外这里每行还有编辑,删除等功能,事件处理函数中的参数,scope.$index就是该行的下标,scope.row就是该行的数据所有消息对象,有了这两个参数我们就可以实现编辑(分配,转派,完工),删除功能,所以这个 slot-scope="scope"是非常重要的

slot-scope="scope"本质上就是一个插槽,scoperow属性有着表格一整行的数据。
它还有其他有用的属性,比如$index

作用域插槽实际上是带有数据的插槽,可以获取到父组件传递的参数,将这些参数使用到子组件插槽里

scope相当于一行的数据, scope.row相当于当前行的数据对象。
这里就是用插槽 拿到当前行 row是个内置的属性 ,vue slot的scope传递值是父作用域中的源数据改变,值会同步改变。且{{scope.$index}}可以获取当前行的index。

现在vue提供了scope 以及 scope.row 可以让我们更方便的操作数据

  • slot-scope='scope' 作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法
  • scope.row 使用ElementUI表格模板渲染数据时使用

当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象

 

 

REF

https://www.cnblogs.com/sunny3158/p/17306490.html

 

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

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

相关文章

VMware Workstation不支持的硬件版本,模块Upgrade启动失败

1、我是从高版本的VMware Workstation降级后,再打开之前的虚拟机报错如下 2、打开虚拟机文件目录,用文本打开虚拟机的 .vmx文件,搜索定位到 virtualHW 字段,修改该字段为自己当前VMware版本,然后保存并开机

Next.js中间件权限绕过漏洞分析(CVE-2025-29927)

本文代码版本为next.js-15.2.2 本篇文章首发在先知社区:https://xz.aliyun.com/news/17403 一、漏洞概述 CVE-2025-29927是Next.js框架中存在的一个高危中间件逻辑绕过漏洞,允许攻击者通过构造特定HTTP请求头,绕过中间件的安全控制逻辑(如身份验证、路径重写、CSP防护等)。…

vue+openlayers示例:线水流效果(附源码下载)

demo源码运行环境以及配置运行环境:依赖Node安装环境,demo本地Node版本:推荐v16+。 运行工具:vscode或者其他工具。 配置方式:下载demo源码,vscode打开,然后顺序执行以下命令: (1)下载demo环境依赖包命令:npm i (2)启动demo命令:npm run dev (3)打包demo命令: …

蓝屏STOP:0x0000007B

生产线需要,得准备一台Windows XP的操作系统电脑。在安装时,出现下面蓝屏,A problem has been detected and windows has been shut down to prevent damage to your computer. If this is the first time youve seen this stop error screen, restart your computer. If th…

必看!2025 年颠覆测试行业的 10 大 AI 自动化测试工具/平台(上篇)

大家好,我是狂师。 上周小孩子生病,住院照顾,停更了几天。 各位看官,等着急了吧,之前有粉丝后台留言,想了解学习一下,AI这么火爆,那市面上AI与自动化测试结合起来的有哪些推荐的工具/平台。 今天就这个话题来聊一聊。 前言 在软件迭代以“天”为单位的今天,随着软件迭…

2025年企业必读指南:文件摆渡系统的5大核心功能

在数字化转型的浪潮中,企业面临着前所未有的挑战与机遇。优化信息流转、提升协作效率、确保数据安全及合规性,已成为企业持续发展的关键要素。在这一背景下,文件摆渡系统作为连接不同网络、网域之间的桥梁,承担着文件传输、共享、管理和归档等多重任务,其重要性日益凸显。…

利用AI增强VS Code TypeScript插件:AnyToTS带来编程新体验

Any to TS: VSCode 扩展插件 概述 "Any to TS" 是一个强大的 VSCode 扩展插件,旨在将任何对象转换为 TypeScript 类型或接口。该工具基于 vscode-json-to-ts 进行功能扩展,提供了一系列便捷的功能,帮助开发者更高效地处理 TypeScript 类型定义。 核心功能 传统功能…

虚函数表里有什么?(一)——从一个普通类开始

本系列文章,旨在探究C++虚函数表中除函数地址以外的条目,以及这些条目的设计意图和作用,并介绍与此相关的C++类对象内存布局,最后将两者用图解的形式结合起来,给读者带来全局性的视角。让我们从一个简单的类出发,开启我们的探索之旅。前言 本系列文章,旨在探究C++虚函数…

《HelloGitHub》第 108 期

兴趣是最好的老师,HelloGitHub 让你对开源感兴趣!简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。github.com/521xueweihan/HelloGitHub这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、Java、Go、C/C++、Swift...让你在短…

读DAMA数据管理知识体系指南33参考数据和主数据活动

读DAMA数据管理知识体系指南33参考数据和主数据活动1. 主数据管理活动 1.1. 识别驱动因素和需求1.1.1. 每个组织都有不同的主数据管理驱动因素和障碍,受系统的数量和类型、使用年限、支持的业务流程以及交易和分析中数据使用方式的影响1.2. 评估和评价数据源1.2.1. 现有应用中…

C++内存序

C++的3种memory model: + sequentially consistent + relexed + acquire-release 对应5.3章《C++ concurrency in action》5.3 Synchronizing operations and enforcing ordering 首先就是对于程序来说都是通过 "happens-before" 和 "synchronizes-with" …

如何快速解决单细胞拟时序分析旧版本Monocle包导致的orderCells过程的报错

当我们整理好一版本的单细胞转录组数据分析代码,并完成一个项目的单细胞转录组数据分析项目。当我们再进行另外一个单细胞转录组数据的项目分析时,突然发现原来跑通的代谢,突然一直报错那是一件很苦恼的问题,想必各位科研党遇到这种问题是不是也有砸电脑的心情。今天主要写…