【已解决】uniapp微信小程序具名插槽多了个-1？循环slot失效的真正原因

张开发
• 2026/4/10 22:27:36 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

【已解决】uniapp微信小程序具名插槽多了个-1？循环slot失效的真正原因
UniApp 微信小程序具名插槽名被添加后缀的问题做 UniApp 小程序开发的时候踩了个坑动态插槽名莫名其妙被加上了-0、-1这样的后缀对不上本来我已经遇到过一次了解决之后第二次又忘记了今天就和大家分享下。问题长什么样子组件 FilterDropdown 这么写的view v-for(item, index) in items :keyitem.name slot :nameitem?.props :closeclose :panelActiveactiveIndex index / /view父组件对应的插槽名是#date_range_panel想着应该能对上结果编译到小程序里插槽名变成了date_range_panel-0。根因微信小程序不支持 Vue 原生的动态插槽UniApp 编译器要把:nameitem.props转成小程序的slot属性。在v-for循环里转的时候会把数组索引拼上去就变成了slot-date_range_panel-0。加上v-for 动态插槽 { close, panelActive }解构这三个东西凑一起编译器更容易抽风。踩坑过程第一反应是能不能手动指定props: date_range_panel-0让编译器的拼接结果对上。结果是小程序模板里变成了view slotdate_range_panel-0-0编译器拿到props: date_range_panel-0之后还会再拼一层索引等于白搭。怎么解决用 expose ref 代替解构。不用作用域插槽传过来的close改成子组件用defineExpose暴露方法父组件直接调。子组件改一下script setup langts const activeIndex ref(-1); const close () { activeIndex.value -1; }; defineExpose({ close, activeIndex, }); /script父组件那边template #date_range_panel DateRangePanel refdateRangePanelRef confirmhandleDateConfirm / /templateconstfilterDropdownRefref();filterDropdownRef.value?.close();这样就不依赖解构了插槽名爱加什么后缀加什么后缀反正父组件根本不用解构拿数据。经验之谈微信小程序里v-for 动态插槽 作用域插槽解构这三件套能不凑一起就别凑一起。实在要用就用defineExpose把方法暴露出去别走解构那条路。refs 在小程序里本来就好使换这个写法心理负担也不大。

更多文章