当前位置: 首页 > 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也就会接收到该值。

http://www.lryc.cn/news/502579.html

相关文章:

  • umi实现动态获取菜单权限
  • Pytest-Bdd-Playwright 系列教程(14):Docstring 参数
  • 交互开发---测量工具(适用VTK或OpenGL开发的应用程序)
  • Qt 一个简单的QChart 绘图
  • 【Java笔记】LinkedList 底层结构
  • el-table组件树形数据修改展开箭头
  • 太速科技-FMC154-基于FMC 八路SFP+万兆光纤子卡
  • 记:排查设备web时慢时快问题,速度提升100%
  • 音视频入门基础:MPEG2-TS专题(13)——FFmpeg源码中,解析Section Header的实现
  • 根据PDF模板单个PDF导出到浏览器和多个PDF打包ZIP导出到浏览器
  • 如何创建一个基本的Spring Boot应用程序
  • 1.2 计算机网络的分类和应用(重要知识点)
  • @JsonSerialize失效解决
  • Docker部署WebRTC-Streamer
  • 2025年的大模型计划重点在于跨领域智能、工作流自动化、多模态能力强化
  • day12 接口测试 ——入门→精通→实战(1)
  • 伏羲0.07(文生图)
  • scala的泛型特质的应用场景
  • Win10环境vscode+latex+中文快速配置
  • 【vue2】el-select,虚拟滚动(vue-virtual-scroller)
  • 【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法
  • 【RabbitMQ】RabbitMQ中核心概念交换机(Exchange)、队列(Queue)和路由键(Routing Key)等详细介绍
  • 【AI知识】过拟合、欠拟合和正则化
  • 计算机毕设-基于springboot的航空散货调度系统的设计与实现(附源码+lw+ppt+开题报告)
  • 视图、转发与重定向、静态资源处理
  • 优选算法——分治(快排)
  • 【Linux系统】文件系统
  • javaweb的基础
  • 家里养几条金鱼比较好?
  • 写作词汇积累:差池、一体两面、切实可行极简理解