小程序slot和v-for使用异常，只展示最后一项

[yeah-no]

问题描述
slot配合v-for使用，想实现列表组件，但是只显示最后一项内容。
跟列表内容有关系，简单的内容没问题，这里有个例子必现，
image标签注释了就没问题，启用就必现

复现步骤
[复现问题的步骤]
写个简单的例子，列表控件，然后设置列表单项内容，内容简单就正常，这边内容iamge src使用方法调用就必现

<template>  
    <view>  
        <view v-for="(item, index) in list" :key="index">  
            <slot :item="item"></slot>  
        </view>  
    </view>  
</template>

<template>  
    <view>  
        <page-navview isBack="true" title="base" />  
        <szyDragList :list="list">  
            <template slot-scope="{ item }">  
                <view class="u-m-30" style="width: 500rpx;height: 200rpx;background: #00AAFF;">  
                    <view> {{item.label}}</view>  
                     <!-- image标签注释了就没问题，启用就必现 -->
                    <image class="u-w-32 u-h-32" :src="kImage('/release/editor_add.png')"></image>  
                    <image class="u-w-32 u-h-32" src="kImage"></image>  
                    <text style="color: #FFFFFF;">aaa</text>  
                </view>  
            </template>  
        </szyDragList>  
    </view>  
</template>

预期结果
列表正常使用渲染

实际结果
列表只展示最后一项

系统信息:

• 发行平台: 微信小程序
• 操作系统 都可以复现
• HBuilderX版本 3.4.7
• 设备信息 都可以复现

补充信息
内容可能导致功能正常，和变现BUG，可以从内容这边复现找原因
问答社区链接：https://ask.dcloud.net.cn/question/144058
问答社区有发了demo

[zhetengbiji]

是的，由于转换成了原生小程序组件，目前部分小程序平台（如微信小程序）暂未支持多次渲染同一个slot。

[zhetengbiji]

针对slot的优化方案，可以采用如下方式体验：
使用CLI创建的项目可以手动更新uni相关依赖到：2.0.2-alpha-3070820230320001，同时在manifest.json文件的mp-weixin节点下增加："slotMultipleInstance": true
HBuilderX创建的项目需要找的编译插件的安装目录来更新依赖，不建议手动操作，最好等待HBuilderX后续更新。

[monkeying-boy]

针对slot的优化方案，可以采用如下方式体验： 使用CLI创建的项目可以手动更新uni相关依赖到：2.0.2-alpha-3070820230320001，同时在manifest.json文件的mp-weixin节点下增加："slotMultipleInstance": true HBuilderX创建的项目需要找的编译插件的安装目录来更新依赖，不建议手动操作，最好等待HBuilderX后续更新。

我想通过 npx @dcloudio/uvm 2.0.2-alpha 命令更新依赖结果报错了，报错如下：

[zhetengbiji]

针对slot的优化方案，可以采用如下方式体验： 使用CLI创建的项目可以手动更新uni相关依赖到：2.0.2-alpha-3070820230320001，同时在manifest.json文件的mp-weixin节点下增加："slotMultipleInstance": true HBuilderX创建的项目需要找的编译插件的安装目录来更新依赖，不建议手动操作，最好等待HBuilderX后续更新。

我想通过 npx @dcloudio/uvm 2.0.2-alpha 命令更新依赖结果报错了，报错如下：

1. 不要使用管理工具自动更新依赖，手动更新一下依赖版本
2. 另外真的没有 2.0.2-alpha 这个版本

[zhetengbiji]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

[monkeying-boy]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后
问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常）
问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

[zhetengbiji]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

[monkeying-boy]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

现在我这边关联的业务流程稍微比较多没法直接提供代码，上午我尝试写一个 demo 来复现这种情况，可惜没有复现出来。 我这边的业务场景是在线聊天

[zhetengbiji]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

现在我这边关联的业务流程稍微比较多没法直接提供代码，上午我尝试写一个 demo 来复现这种情况，可惜没有复现出来。 我这边的业务场景是在线聊天

那先提供一个单独针对问题二的demo，我猜测应该是和插槽数据同步时机有关，尝试在框架处理一下。

[monkeying-boy]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

现在我这边关联的业务流程稍微比较多没法直接提供代码，上午我尝试写一个 demo 来复现这种情况，可惜没有复现出来。 我这边的业务场景是在线聊天

那先提供一个单独针对问题二的demo，我猜测应该是和插槽数据同步时机有关，尝试在框架处理一下。

在业务中我通过 this.$nextTick(() => {this.id= 'id'}) 调用在微信小程序无效，但是我单独写一个 demo 内容很简单就是 scroll-view 和一个按钮，这样是无法复现出来的。也就是说我现在提出的两个问题都在我业务中体现出来，简单的 demo 完全不能复现出来

[monkeying-boy]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

现在我这边关联的业务流程稍微比较多没法直接提供代码，上午我尝试写一个 demo 来复现这种情况，可惜没有复现出来。 我这边的业务场景是在线聊天

那先提供一个单独针对问题二的demo，我猜测应该是和插槽数据同步时机有关，尝试在框架处理一下。

动态 class 导致页面闪烁这个问题我复现出来了，是由于我在 mounted 中给 data 赋值导致的，我改成在 create 方法中赋值就不会存在闪烁问题了。
有一个新的问题，支持在循环中使用插槽后，编译成微信小程序在微信开发者工具中有警告，是由于打包后使用了 wx:for 没有使用 wx:key 导致的，不过这个不影响流程

[zhetengbiji]

npx @dcloudio/uvm@latest 2.0.2-alpha-3071220230324001

我的项目是使用 cli 搭建的，更新到 2.0.2-alpha-3071220230324001 版本后 问题1：动态 class 在小程序中会导致布局闪烁（在 h5 正常） 问题2： scroll-view 中的 :scroll-into-view="id" ，在给 id 赋值时写法是 this.$nextTick(() => {this.id= 'id'})只在 h5 生效，在微信小程序不生效（2.0.2-3070320230222001 版本表现正常 ），我直接赋值 this.id= 'id' 在微信小程序有效，在h5 无效

问题一提到的闪烁情况尽管是这种模拟方式可以预见的，但是可能存在优化空间。例子先给一下，我尝试优化对比。

现在我这边关联的业务流程稍微比较多没法直接提供代码，上午我尝试写一个 demo 来复现这种情况，可惜没有复现出来。 我这边的业务场景是在线聊天

那先提供一个单独针对问题二的demo，我猜测应该是和插槽数据同步时机有关，尝试在框架处理一下。

动态 class 导致页面闪烁这个问题我复现出来了，是由于我在 mounted 中给 data 赋值导致的，我改成在 create 方法中赋值就不会存在闪烁问题了。 有一个新的问题，支持在循环中使用插槽后，编译成微信小程序在微信开发者工具中有警告，是由于打包后使用了 wx:for 没有使用 wx:key 导致的，不过这个不影响流程

好的，后续此方案稳定了之后会补充key

[zhetengbiji]

HBuilderX alpha 3.7.12 已发布

[monkeying-boy]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

[zhetengbiji]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

[monkeying-boy]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

目前我们项目都是使用 cli 搭建的，目前只有 2.0.2-alpha-3071220230324001 这一个版本修复了小程序 slot 问题吗？还没有合并到正式版本吗？

[zhetengbiji]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

目前我们项目都是使用 cli 搭建的，目前只有 2.0.2-alpha-3071220230324001 这一个版本修复了小程序 slot 问题吗？还没有合并到正式版本吗？

未合并，等于或者高于3.7.12都可以，现在可以不关注2.0.2-alpha-3071220230324001这种格式的版本号，使用文档中的版本管理工具进行管理。比如：npx @dcloudio@uvm alpha 即可

[monkeying-boy]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

目前我们项目都是使用 cli 搭建的，目前只有 2.0.2-alpha-3071220230324001 这一个版本修复了小程序 slot 问题吗？还没有合并到正式版本吗？

合并了，等于或者高于都可以，现在可以不关注2.0.2-alpha-3071220230324001这种格式的版本号，使用文档中的版本管理工具进行管理。比如：npx @dcloudio@uvm 即可

不对呀，我执行 npx @dcloudio/uvm 命令，安装完后的依赖也是 2.0.2-3071120230427001 版本，然后上边你又说的这个版本不包含修复的小程序 slot 问题，那我升级到最新版本还是会遇到小程序 slot 问题。

[zhetengbiji]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

目前我们项目都是使用 cli 搭建的，目前只有 2.0.2-alpha-3071220230324001 这一个版本修复了小程序 slot 问题吗？还没有合并到正式版本吗？

未合并，等于或者高于3.7.12都可以，现在可以不关注2.0.2-alpha-3071220230324001这种格式的版本号，使用文档中的版本管理工具进行管理。比如：npx @dcloudio@uvm alpha 即可

[zhetengbiji]

@zhetengbiji 请问一下 2.0.2-3071120230427001 这个版本包含修复的小程序 slot 问题吗？我升级到该版本后打包成微信小程序后无法正常渲染插槽内容

不含，你可以使用文档中提到的版本管理工具更新到3.7.12+

目前我们项目都是使用 cli 搭建的，目前只有 2.0.2-alpha-3071220230324001 这一个版本修复了小程序 slot 问题吗？还没有合并到正式版本吗？

合并了，等于或者高于都可以，现在可以不关注2.0.2-alpha-3071220230324001这种格式的版本号，使用文档中的版本管理工具进行管理。比如：npx @dcloudio@uvm 即可

不对呀，我执行 npx @dcloudio/uvm 命令，安装完后的依赖也是 2.0.2-3071120230427001 版本，然后上边你又说的这个版本不包含修复的小程序 slot 问题，那我升级到最新版本还是会遇到小程序 slot 问题。

不好意思，写错了，已修改回答