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

news2024/12/17 15:14:10

最近在封装一个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也就会接收到该值。

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

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

相关文章

Qt-Advanced-Docking-System配置及使用、心得

Qt-Advanced-Docking-System 1. Qt-Advanced-Docking-System描述2. 功能特点2.1. 灵活的停靠方式2.2. 嵌套停靠2.3. 自定义布局保存与恢复2.4. 外观和行为定制 3. 与Qt原生停靠系统的比较4. 使用场景4.1. 集成开发环境&#xff08;IDE&#xff09;4.2. 图形设计软件4.3. 数据分…

Vue中纯前端实现导出简单Excel表格的功能

Vue 前端Excel导出 Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件) 前言 在许多的后台系统中少不了导出Excel表格的功能&#xff0c;在项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能。 使用方法 1、安装依赖 npm install vue-json-exc…

【系统分析师】-收官整理-已考过

1、考试历程 之前从未参加过软考 2023年11月系统架构师【未通过】 2024年05月系统架构师【已通过】 2024年11月系统分析师【已通过】 鉴于架构师与分析师在基础知识上比较相似&#xff0c;在看到架构考试通过后&#xff0c;就准备往系分方面。 2、考题分析 今年下半年系分考试…

暂停window11自动更新

window11 的自动更新功能&#xff0c;一方面在后台占用资源&#xff0c;容易导致电脑卡顿&#xff1b;另一方面&#xff0c;“更新并关机” 和 “更新并重启” 的设置令人极其反感。很多补丁兼容性很差&#xff0c;更新后极易引发电脑蓝屏、闪屏等意想不到的 bug。 1.winR打开运…

opengauss架构图

资料来源&#xff1a;04轻松上手openGauss之openGauss对象管理&#xff08;上&#xff09;_哔哩哔哩_bilibili 资料来源&#xff1a;04轻松上手openGauss之openGauss对象管理&#xff08;上&#xff09;_哔哩哔哩_bilibili

2024,大模型杀进“决赛圈”

Henry Chesbrough在著作《通过技术创新盈利势在必行》中&#xff0c;曾提出过一个创新的“漏斗模型”。开放式创新一开始鼓励百花齐放&#xff0c;但最终只有10%的技术能够通过这个漏斗&#xff0c;成功抵达目标市场target market&#xff0c;进入到商业化与产业化的下一个阶段…

C++重点和练习-----多态

rpg.cpp: #include <iostream>using namespace std;/*模拟一个游戏场景有一个英雄&#xff1a;初始所有属性为1atk,def,apd,hp游戏当中有以下3种武器长剑Sword&#xff1a; 装备该武器获得 1atx&#xff0c;1def短剑Blade&#xff1a; 装备该武器获得 1atk&#xff0c;1…

细说STM32F407单片机SPI基础知识

目录 一、 SPI接口和通信协议 1、 SPI硬件接口 &#xff08;1&#xff09;MOSI(Master Output Slave Input) &#xff08;2&#xff09;MISO(Master Input Slave Output) &#xff08;3&#xff09;SCK 2、SPI传输协议 &#xff08;1&#xff09;CPHA0时的数据传输时序 …

种草电商系统APP功能需求开发案例

种草电商系统‌是一种结合了社区互动和电商交易的平台&#xff0c;能看到其他小伙伴分享的各种真实购物心得、超美商品图片和超实用视频&#xff0c;让我们去发现好物。可以随心关注感兴趣的人&#xff0c;跟他们畅聊购物体验&#xff0c;点赞、评论、转发那些心动的分享。其主…

EnumMap:让Java Map更高效的技巧

前言 摘要 内容 什么是EnumMap 如何使用EnumMap EnumMap的实现原理 EnumMap的例子 测试用例 小结 前言 在Java中&#xff0c;枚举类型是一种非常有用的数据类型&#xff0c;它可以用于定义一组固定的常量。枚举类型在很多场景中都有广泛的应用&#xff0c;例如状态码、…

测试工程师八股文05|功能测试、业务测试

一、基础概念 1、软件测试分类 1️⃣按照软件产生的阶段划分 单元测试&#xff1a;针对程序源代码进行测试【开发自测】集成测试&#xff1a;针对模块之间功能交互进行测试系统测试&#xff1a;对整个系统&#xff08;功能、非功能&#xff09;进行全面测试验收测试&#xff…

中国计算机学会计算机视觉专委会携手合合信息举办企业交流活动,为AI安全治理打开“新思路”

近期&#xff0c;《咬文嚼字》杂志发布了2024年度十大流行语&#xff0c;“智能向善”位列其中&#xff0c;过去一年时间里&#xff0c;深度伪造、AI诈骗等话题屡次登上热搜&#xff0c;AI技术“野蛮生长”引发公众担忧。今年9月&#xff0c;全国网络安全标准化技术委员会发布了…

《计算机视觉:瓶颈之辩与未来之路》

一、计算机视觉的崛起 计算机视觉是使用计算机模仿人类视觉系统的科学&#xff0c;让计算机拥有类似人类提取、处理、理解和分析图像以及图像序列的能力。它是一个多学科交叉的领域&#xff0c;与机器视觉、图像处理、人工智能、机器学习等领域密切相关。 计算机视觉行业可分为…

Airborne使用教程

1.安装环境 前提条件&#xff1a;系统已安装Ruby 打开终端输入如下命令 gem install airborne 或者在Gemfile添加 gem airborne 然后运行bundle install 2.编写脚本 在项目中新建api_tests_spec.rb文件 以GET接口"https://www.thunderclient.com/welcome"为…

Hadoop其一,介绍本地模式,伪分布模式和全分布搭建

目录 一、Hadoop介绍 二、HDFS的本地模式 三、伪分布模式 四、Hdfs中的shell命令 五、全分布搭建 六、使用Java代码操作HDFS 1、环境准备 2、单元测试&#xff08;Junit&#xff09;​编辑 一、Hadoop介绍 Hadoop 分为三部分 &#xff1a; Common、HDFS 、Yarn、MapRe…

【Tomcat】第五站:Servlet容器

Tomcat启动后&#xff0c;获取到项目当中所有的servlet的WebServlet中的配置信息。将配置信息和类对象都写入一个map集合当中。 map就是一个key-value类型的集合。 在MyTomcat中我们获取到了类对象和注解值。 Tomcat与请求连通 1. ServletConfigMapping 1. 创建一个config包…

猫眼浏览器v4.12.1重磅升级,极速、安全、保护全方位提升

猫眼浏览器&#xff08;Catsxp&#xff09;是一款经过深度优化的网页浏览器&#xff0c;凭借其创新性的设计理念和卓越的性能表现&#xff0c;正在重新定义现代浏览器的标准。这款基于Chrome内核精心打造的浏览器不仅为用户带来了全方位的网络体验提升&#xff0c;更在保护用户…

Axure原型设计技巧与经验分享

AxureRP作为一款强大的原型设计工具&#xff0c;凭借其丰富的交互设计能力和高保真度的模拟效果&#xff0c;赢得了众多UI/UX设计师、产品经理及开发人员的青睐。本文将分享一些Axure原型设计的实用技巧与设计经验&#xff0c;帮助读者提升工作效率&#xff0c;打造更加流畅、用…

梳理你的思路(从OOP到架构设计)_UML应用:业务内涵的分析抽象表达02

目录 1、举例(二) &#xff1a;西方童话 童话『青蛙王子』 的故事 故事中的概念 2、举例(三) &#xff1a;点餐服务 『 餐馆点餐服务』 的分析步骤&#xff1a; 1、举例(二) &#xff1a;西方童话 童话『青蛙王子』 的故事 从前有一位美丽的公主&#xff0c;喜欢玩金球。…

DevExpress WPF中文教程:Grid - 如何移动和调整列大小?(一)

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…