当前位置: 首页 > news >正文

uniapp小程序 slot中无法传递外部参数的解决方案

最近在封装一个List组件,外部传给我数据,我循环后将每个Item部分slot到外部,由调用者自己去写item布局,类似ElementUI、iView的Tabe列表。
List:

<view v-if="list.length > 0" class="list-scroll__item" v-for="(item, index) in list" :key="item.id" @click="onClickItem(item)"><slot :item="item" :index="index"/>
</view>

调用:

 <list :list="list"><item slot-scope="{item}"  :item="item"></item></list>


item是自定义每一项的样式组件,可自行脑补。
**不出意外这样就可以正常显示列表数据了**,如果出了意外只能显示一项请配置slot编译模式
scopedSlotsCompiler:legacy 为旧版编译模式,新版模式: auto 与 augmented,可切换尝试

不出意外就能正常显示了!

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

我现在还有第二个需求,就是item里有点击事件,我要将我点击的项目传递给每个slot的item,然后每个item根据数据做出变化。

现在改动一下:

<list :list="list"><item slot-scope="{item}"  :item="item"  :current="currentItem" @clickItem="(e)=>currentItem=e"></item></list>

currentItem:是页面数据 @clickItem是接收item内部点击事件的数据,然后赋值给currentItem,

不知道您看明白了没?总的来说就是我在某一个item发生点击事件的时候,将传出来的值赋值给页面变量currentItem,然后把currentItem赋值给每个item,只有点击的item跟currentItem是一个时才做出某些变动,如果不一样则还原之前的变动。

就是这么个再平常不过的事件,但是currentItem死活都传不过去,具体讨论解释可参考:

https://github.com/dcloudio/uni-app/issues/495

反正就是无解!!!!!实在没有办法我就想其他笨办法先解决问题吧。

1、首先将:current="currentItem"移动到list组件上,然后list内增加props为current的接收对象,就变为:

<list :list="list" :current="currentItem" ><item slot-scope="{item}"  :item="item"  @clickItem="(e)=>currentItem=e"></item></list>

List内部:

props:{list: { type: Array, default: () => [] },
current:{ type:Object, default:()=>{} }
}

2、这样list组件就能接收到页面参数了,然后将list内部slot部分改动如下,将接收的参数抛出去:

<view v-if="list.length > 0" class="list-scroll__item" v-for="(item, index) in list" :key="item.id" @click="onClickItem(item)"><slot :item="item" :index="index" :current="current"/>
</view>

3、 到此外面的slot  item部分就能接收到该参数了

<list :list="list" :current="currentItem"><item slot-scope="{item,current}"  :item="item"  :current="current" @clickItem="(e)=>currentItem=e"></item></list>

到此一个连贯的传值操作就结束了!总结如下:

slot部分不能直接传递页面参数,也就是作用域以外的参数,但是变相可以传递,

1、先传递给父组件,并且父组件内props接收该参数

2、父组件内slot将接收的参数slot出去,抛给slot复写的人

3、复写slot的人在接收该参数传递给自己复写的item部分,自己的item增加点击事件变更传递给父组件的值,slot部分的item也就会接收到该值。

相关文章:

uniapp小程序 slot中无法传递外部参数的解决方案

最近在封装一个List组件&#xff0c;外部传给我数据&#xff0c;我循环后将每个Item部分slot到外部&#xff0c;由调用者自己去写item布局&#xff0c;类似ElementUI、iView的Tabe列表。 List: <view v-if"list.length > 0" class"list-scroll__item&quo…...

umi实现动态获取菜单权限

文章目录 前景登录组件编写登录逻辑菜单的时机动态路由页面刷新手动修改地址 前景 不同用户拥有不同的菜单权限&#xff0c;现在我们实现登录动态获取权限菜单。 登录组件编写 //当我们需要使用dva的dispatch函数时&#xff0c;除了通过connect函数包裹组件还可以使用这种方…...

Pytest-Bdd-Playwright 系列教程(14):Docstring 参数

Pytest-Bdd-Playwright 系列教程&#xff08;14&#xff09;&#xff1a;Docstring 参数 前言一、什么是docstring?二、基本语法三、主要特点四、实际例子五、注意事项六、使用建议总结 前言 在自动化测试的过程中&#xff0c;我们经常需要处理复杂的测试数据或需要输入多行文…...

交互开发---测量工具(适用VTK或OpenGL开发的应用程序)

简介&#xff1a; 经常使用RadiAnt DICOM Viewer来查看DICOM数据&#xff0c;该软件中的测量工具比较好用&#xff0c;就想着仿照其交互方式自己实现下。后采用VTK开发应用程序时&#xff0c;经常需要开发各种各样的测量工具&#xff0c;如果沿用VTK的widgets的思路&#xff0c…...

Qt 一个简单的QChart 绘图

Qt 一个简单的QChart 绘图 先上程序运行结果图&#xff1a; “sample9_1QChart.h” 文件代码如下&#xff1a; #pragma once#include <QtWidgets/QMainWindow> #include "ui_sample9_1QChart.h"#include <QtCharts> //必须这么设置 QT_CHARTS_USE_NAME…...

【Java笔记】LinkedList 底层结构

一、LinkedList 的全面说明 LinkedList底层实现了双向链表和双端队列特点可以添加任意元素(元素可以重复)&#xff0c;包括null线程不安全&#xff0c;没有实现同步 二、LinkedList 的底层操作机制 三、LinkedList的增删改查案例 public class LinkedListCRUD { public stati…...

el-table组件树形数据修改展开箭头

<style lang"scss" scoped> ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {content: ">"; // 箭头样式font-size: 16px; }::v-deep .el-table__expand-icon{ // 没有展开的状态background-color: rgba(241, 242, 245, 1);color:…...

太速科技-FMC154-基于FMC 八路SFP+万兆光纤子卡

FMC154-基于FMC 八路SFP万兆光纤子卡 一、板卡概述 本卡是一个FPGA夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达8个SFP / SFP 模块接口&#xff0c;直接插入千兆位级收发器&#xff08;MGT&#xff09;的赛灵思FPGA。支持业界标准的小型可插拔&#xff0…...

记:排查设备web时慢时快问题,速度提升100%

问题描述 问题1&#xff1a; 发现web登录界面刷新和登录功能都比较卡&#xff0c;开浏览器控制台看了下&#xff0c;让我很惊讶&#xff0c;居然能这么慢&#xff1a; 公司2个局域网内的表现不同&#xff0c;局域网A中的都比较卡&#xff0c;局域网B中的又不存在该现象。 问…...

音视频入门基础:MPEG2-TS专题(13)——FFmpeg源码中,解析Section Header的实现

一、引言 在《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;11&#xff09;—— TS中的Section》中讲述了Section Header的基本概念&#xff0c;本文讲述FFmpeg源码中是怎样解析Section Header的。 二、parse_section_header函数的定义 FFmpeg源码中通过parse_section…...

根据PDF模板单个PDF导出到浏览器和多个PDF打包ZIP导出到浏览器

一、单个PDF导出到浏览器 /*** * param templatePath 模板路径* param fileName 文件名称* param data 填充文本* param images 填充图片* param response* throws IOException*/public static void generateTempPDF(String templatePath, String fileName, Map<String, S…...

如何创建一个基本的Spring Boot应用程序

以下是一个简单的Spring Boot应用开发代码示例&#xff0c;它展示了如何创建一个基本的Spring Boot应用程序&#xff0c;并实现一个简单的RESTful API服务。 步骤1&#xff1a;创建项目 使用Spring Initializr或您喜欢的IDE&#xff08;如IntelliJ IDEA或Eclipse&#xff09;…...

1.2 计算机网络的分类和应用(重要知识点)

1.2.1 计算机网络的分类 计算机网络的定义&#xff1a; 由通信线路互相连接的、能自主工作的计算机构成&#xff0c;强调各计算机&#xff08;工作站&#xff09;拥有独立的计算资源和任务能力。与多终端分时系统不同&#xff0c;后者终端仅作为主机接口&#xff0c;不具备计…...

@JsonSerialize失效解决

当在实体类中加入这个注解时&#xff0c;本意是想如果是空值则返回0给页面&#xff0c;但是发现使用 JsonSerialize(using BigSerializer.class)无效&#xff0c;因为如果是null值会不走序列化的接口实现类&#xff0c;需要使用nullUsing 需要这样使用...

Docker部署WebRTC-Streamer

文章目录 WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题 WebRTC-Streamer概述 WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具&#xff0c;它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式&#xff…...

2025年的大模型计划重点在于跨领域智能、工作流自动化、多模态能力强化

明年的计划和大模型发展方向可以围绕以下几个方面展开&#xff0c;结合实际应用场景和技术趋势&#xff0c;明确可执行的目标和期待的成果&#xff1a; 2025 年计划与展望&#xff1a;大模型能做些什么&#xff1f; 1. 更深层次的跨领域能力融合 目标&#xff1a;构建更强的跨…...

day12 接口测试 ——入门→精通→实战(1)

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、接口测试分类 1.1 内部接口&#xff1a; 1.2 外部接口&#xff1a; 2、目前接口架构设计 2.1、基于SOAP架构&#xff0c; 2.2、基于RPC架构&#xff0c; 2.3、基于RestFul架构&#xff0c; 2.3.1…...

伏羲0.07(文生图)

为了使0.06代码能够有效运行并输出项目目录及所有文件&#xff0c;我们在代码中添加一些额外的功能。 项目目录结构 项目目录结构如下&#xff1a; text_to_image_project/ │ ├── config.yaml ├── data/ │ ├── train_data.csv │ └── test_data.txt ├── mod…...

scala的泛型特质的应用场景

//泛型特质的应用场景 //作比较找出最大值 //定义一个函数&#xff0c;用来求List元素中的最大值参考代码&#xff1a;object Test4 {def getMax[T](list:List[T])(implicit ev:T > Ordered[T]): T {list.reduce((a:T,b:T)> if(a>b) a else b)}def main(args: Array…...

Win10环境vscode+latex+中文快速配置

安装vscodelatex workshop 配置&#xff1a; {"liveServer.settings.donotVerifyTags": true,"liveServer.settings.donotShowInfoMsg": true,"explorer.confirmDelete": false,"files.autoSave": "afterDelay","exp…...

【vue2】el-select,虚拟滚动(vue-virtual-scroller)

需求背景​​​​​​ vue2+element-ui项目中,当el-select中数据量较大时(超出5000个dom节点),会导致页面加载和渲染卡顿、el-select下拉列表延迟展开。 在现在的el-select的基础上使用分页或者虚拟列表的形式去处理大量的下拉菜单,可以保证页面的正常渲染及el-select的…...

【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法

在分布式系统中&#xff0c;etcd 的一致性与高效性得益于其强大的 Raft 协议模块。而 processInternalRaftRequestOnce 是 etcd 服务器处理内部 Raft 请求的核心方法之一。本文将从源码角度解析这个方法的逻辑流程&#xff0c;帮助读者更好地理解 etcd 的内部实现。 方法源码 …...

【RabbitMQ】RabbitMQ中核心概念交换机(Exchange)、队列(Queue)和路由键(Routing Key)等详细介绍

博主介绍&#xff1a;✌全网粉丝21W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

【AI知识】过拟合、欠拟合和正则化

一句话总结&#xff1a; 过拟合和欠拟合是机器学习中的两个相对的概念&#xff0c;正则化是用于解决过拟合的方法。 1. 欠拟合&#xff1a; 指模型在训练数据上表现不佳&#xff0c;不能充分捕捉数据的潜在规律&#xff0c;导致在训练集和测试集上的误差都很高。欠拟合意味着模…...

计算机毕设-基于springboot的航空散货调度系统的设计与实现(附源码+lw+ppt+开题报告)

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…...

视图、转发与重定向、静态资源处理

目录 视图 默认视图 视图机制原理 自定义视图 请求转发与重定向 静态资源处理 视图 每个视图解析器都实现了 Ordered 接口并开放出一个 order 属性 可以通过 order 属性指定解析器的优先顺序&#xff0c;order 越小优先级越高 默认是最低优先级&#xff0c;Integer.MAX_…...

优选算法——分治(快排)

1. 颜色分类 题目链接&#xff1a;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; 题目展示&#xff1a; 题目分析&#xff1a;本题其实就要将数组最终分成3块儿&#xff0c;这也是后面快排的优化思路&#xff0c;具体大家来看下图。 这里我们上来先定义了3个指针&…...

【Linux系统】文件系统

Windows 和 Linux 的文件系统&#xff1a; windows:NTFS —> NTFS&#xff1a;磁盘大于目录&#xff1a;目录是磁盘的一部分。ubuntu :EXT4 —> EXT4: 目录大于磁盘&#xff1a;磁盘是目录的一部分。 Windows文件系统的特点 基于分区的文件系统&#xff1a; Windows…...

javaweb的基础

文章的简介&#xff1a; 页面的展示&#xff08;HTML&#xff09;页面的修改、绑定、弹窗(js的dom、bom等)页面的请求(Ajax) 1、在HTML中用标签和css样式实现了浏览器页面。 2、用JS实现页面内容&#xff08;图片&#xff0c;复选框、文本颜色内容&#xff09;的修改和弹框&…...

家里养几条金鱼比较好?

金鱼&#xff0c;作为备受喜爱的家庭水族宠物&#xff0c;其饲养数量一直是众多养鱼爱好者关注的焦点。究竟养几条金鱼最为适宜&#xff0c;实则需要综合考量多方面因素&#xff0c;方能达到美观、健康与和谐的理想养鱼境界。 从风水文化的视角来看&#xff0c;金鱼数量有着诸…...

wordpress加菜单/品牌推广与传播怎么写

NEW关注Tech逆向思维视频号最新视频→【为什么要定期给眼睛拍照&#xff1f;】6月8日消息&#xff0c;美国当地时间周二&#xff0c;谷歌母公司Alphabet旗下自动驾驶卡车部门Waymo Via和网约车巨头Uber旗下货运业务部门Uber Freight宣布&#xff0c;两家公司已经签署了长期战略…...

做包子网站/搜索历史记录

ASP.NET笔试题是ASP.NET程序员面试必须经历的&#xff0c;一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷两个都要注意反正面是否都有内容不要遗漏&#xff0c;如果考你机试一般也有两种&#xff0c;就是程序连接数据库或一些基本的算法&#xff08;二分查找&#xf…...

迈创网站建设/友链交换

大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。以照片为例&#xff0c;16&#xff1a;9尺寸的照片是指长边与短边之比是16&#xff1a;9&#xff0c;与照片像素的多与少没有关系&#xff0c;例如可以是长边是160像素、短边是90像素…...

系统开发工具有哪些/北京seo招聘

有符号数的表示法&#xff0c;机器数(出现在电脑的二进位数值)有3个特点&#xff0c; 无符号或符号转换成数值来表示&#xff0c;没有 10101这样的资料&#xff0c;而是以010101来表示。 (推荐学习&#xff1a;phpstorm)只表示单纯的整数或小数&#xff0c;小数点的位置预设在一…...

兴仁企业建站公司/谷歌手机版下载安装

01. ip address show/ip a 检查网卡地址配置02. ping 测试网络连通性03. nmtui 图形界面修改网卡地址信息04. exit 注销05. shutdown 关机命令shutdown -h 5 指定关机时间 &#xff08;推荐&#xff09;shutdown -r 5 重启主机时间 &#xff08;推荐&#xff09;shutdown -…...

政府部门网站建设内容/yandex搜索引擎入口

在Linux命令行下面下载文件&#xff0c;通过wget是比较普遍简单的&#xff0c;比如在CentOS8 里面也一样。我们先来看下自己的CentOS8系统有没有安装wget&#xff1a; [roottest redis]# rpm -qa|grep wget 如果安装了会提示当前安装的版本&#xff1a; wget-1.14-15.el7_4.1.x…...