在uniapp开发微信小程序时，v-for中使用slot的正确姿势

本文链接：https://blog.youkuaiyun.com/wangxi83/article/details/132257716

最新情况（截至2024-03）

经过确认，HBuilderX 3.8.12+，已经可以不用按照本文内容进行手动处理 generic:scoped-slots-itemView="my-component"这个操作了。大家可以放心使用。此版本编译后的wxml文件，已经自动生成了上述内容。

经过验证，本文中所述方法：

<template>
	<view>
		。。其他内容。。。。
		<CommonList>
			<MyComponent slot="itemView" slot-scope="{item}" :item="item"></MyComponent> 
		</CommonList>
	</view>
</template>

......
</script>

或者

<template>
	<view>
		<CommonList>
			<view slot="itemView" slot-scope="{item}">
			    只显示ID：{
  
  {item.id}}
			</view> 
		</CommonList>
	</view>
</template>

......
</script>

都是能正确编译成generic:scoped-slots-itemView这种形式。

PS：为什么用Vue2的老式写法，因为我发现用v-slot或者Vue3的写法，都会有各种灵异问题，这里就不赘述了，请大家自行考虑怎么用吧。

背景

众所周知，大部分使用uniapp开发微信小程序的同学，一定会遇到使用vue开开心心写一个v-for，然后v-for中搞一个slot，结果在使用的时候，H5没问题，微信小程序就只渲染第一个的问题。

比如我有一个组件，假设叫CommonList
这个组件里面有一个v-for，v-for中有一个slot，它循环渲染处理products 。

<template>
	。。其他内容。。。。
	<view class="lists">
		<view class="data-item" v-for="(item, index) in products" :key="index">
			<text>标题</text>
			<slot name="itemView" :item="item">
				<view>
					<text>{
  
  {item}}</text