uni-app 小程序 slot 和 v-for 使用异常 只展示最后一项
uni-app 小程序 slot 和 v-for 使用异常 只展示最后一项
示例代码：
<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 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>操作步骤：
使用示例中<image class="u-w-32 u-h-32" :src="kImage('/release/editor_add.png')"></image>
这个src这样用，必现问题，列表只会展示最后一项
把这个image标签去掉，或者简单设置src一张图片就没问题
预期结果：
列表正常使用渲染
实际结果：
列表内容会导致，只展示最后一项
bug描述：
slot配合v-for使用，想实现列表组件，可能导致只显示最后一项内容。
跟列表内容有关系，简单的内容没问题，这里加了某个image的用法必现。
图一为正常期望效果，图二可见列表只展示了最后一项。
在 uni-app 小程序开发中，使用 slot 和 v-for 时，如果只展示最后一项，通常是因为 slot 的作用域问题或 v-for 的渲染机制导致的。以下是一些可能的原因和解决方案：
1. slot 作用域问题
slot 默认是父组件的内容，子组件无法直接访问父组件的 v-for 循环变量。如果你在 slot 中使用了 v-for，可能会导致只渲染最后一项。
解决方案：
使用 scoped slot（作用域插槽）来传递数据给子组件。
<!-- 父组件 -->
<template>
<child-component>
<template v-slot:default="slotProps">
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
</template>
</child-component>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<slot :items="items"></slot>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>2. v-for 的 key 问题
如果 v-for 的 key 没有正确设置，可能会导致渲染异常。确保每个 v-for 循环项都有一个唯一的 key。
<template>
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>3. slot 和 v-for 的嵌套问题
如果 slot 和 v-for 嵌套使用，可能会导致渲染异常。确保 v-for 在 slot 外部使用。
<!-- 父组件 -->
<template>
<child-component>
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
</child-component>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<slot></slot>
</div>
</template>4. uni-app 小程序的渲染机制
uni-app 小程序的渲染机制可能与 Vue 的渲染机制有所不同，尤其是在 slot 和 v-for 的使用上。如果以上方法都无法解决问题，可以尝试使用 uni-app 提供的其他组件或方法来实现相同的功能。
5. 检查 uni-app 版本
确保你使用的 uni-app 版本是最新的，因为旧版本可能存在一些已知的 bug 或问题。
6. 使用 v-if 替代 v-for
在某些情况下，使用 v-if 替代 v-for 可能会解决问题，但这通常不是最佳实践，除非你确实需要根据条件渲染不同的内容。
<template>
<div v-if="items.length > 0">
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>