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

embedded/2024/12/27 7:36:18/

最近在封装一个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.ppmy.cn/embedded/145392.html

相关文章

【人工智能】F5G-A技术及应用

F5G-A的背景与概念 F5G-A的标准与进展 F5G-A的关键特性

Ungoogled Chromium127编译指南 Windows篇 - Rust标准库查找问题修复(十一)

1. 引言 在修复Python路径问题后&#xff0c;我们遇到的下一个技术挑战是Rust标准库的查找问题。在编译过程中&#xff0c;find_std_rlibs.py脚本无法正确处理Windows环境下的Rust工具链路径&#xff0c;导致编译失败。本文将详细介绍如何解决这个问题。 2. 问题分析 2.1 错…

大数据平台

大数据行业应用持续升温&#xff0c;特别是企业级大数据市场正在进入快速发展时期。越来越多的企业期望实现数据孤岛的打通&#xff0c;整合海量的数据资源&#xff0c;挖掘并沉淀有价值的数据&#xff0c;进而驱动更智能的商业。随着公司数据爆发式增长&#xff0c;原有的数据…

1. 机器学习基本知识(5)——练习题(参考答案)

20.&#x1f517;本章代码笔记&#x1f4d3;链接&#xff08;需要&#x1fa9c;&#xff09;&#xff1a;&#xff08;01_the_machine_learning_landscape.ipynb - Colab (google.com)&#xff09; 如果你不想通过上面的官方网址下载本章的笔记&#xff0c;还可以在本篇博文的…

uniapp 弹出软键盘后打开二级页面,解决其UI布局变动

软键盘弹出&#xff0c;此时点击某按钮打开二级页面&#xff0c;position:fixed 位于底部的按钮不见了&#xff08;通过加高其区域&#xff0c;发现被下移动了&#xff09;&#xff0c;什么原因不清楚? 但是发现是软键盘弹出导致&#xff0c;问题解决通过隐藏键盘再打开二级页…

【深度学习入门】深度学习介绍

1.1 深度学习介绍 学习目标 目标 知道深度学习与机器学习的区别了解神经网络的结构组成知道深度学习效果特点 应用 无 区别 特征提取方面 机器学习的特征工程步骤是要靠手动完成的&#xff0c;而且需要大量领域专业知识深度学习通常由多个层组成&#xff0c;它们通常将更简…

【STM32】RTT-Studio中HAL库开发教程九:FLASH中的OPT

文章目录 一、概要二、内部FLASH排布三、内部FLASH主要特色四、OTP函数介绍五、测试验证 一、概要 STM32系列是一款强大而灵活的微控制器&#xff0c;它的片内Flash存储器可以用来存储有关代码和数据&#xff0c;在实际应用中&#xff0c;我们也需要对这个存储器进行读写操作。…

Unity24件捆绑包2D3D美术素材工具场景素材角色NPC模型动画程序化地编工具UI贴图编辑工具VR魔法特效音效插件20241212

12月Unity商店来了一个24刀24件的捆绑包&#xff0c;里面几个资产还是挺ok的。 Unity24件捆绑包2D3D美术素材工具场景素材角色NPC模型动画程序化地编工具UI贴图编辑工具VR魔法特效音效插件202412121202 24件捆绑包2D3D美术素材工具&#xff1a; https://assetstore.unity.com/m…