uni-app 小程序项目slot插槽渲染问题

在做uni-app 小程序项目时，封装好的列表组件中如果套用slot插槽操作数据，会出现无法正常渲染的问题，官方也给出了说明，暂时不支持slot，所以如果打包上线时遇到问题，建议封装成单组件使用，而非公共组件。

例如：

1. 使用 uni-ui 封装的列表组件，当使用slot并将数据传入子组件时，数据渲染存在问题。

• 列表父组件

<template>
	<!-- 公共列表List组件 -->
	<view id="my-list">
		<uniList>
			<uniListItem :show-arrow="showArrow" v-for="item in dataList" :key="item.id" @click="selected(item)">
				<slot :item="item"></slot>
			</uniListItem>
		</uniList>
	</view>
</template>

<script>
	import {uniList, uniListItem} from "@dcloudio/uni-ui";

	export default {
		data() {
			return {
			}
		},
		components: {
			uniList,
			uniListItem,
		},
		props: {
			// 是否显示箭头图表
			showArrow: { type: Boolean, required: false, default: false },
			// 列表基础数据
			dataList: { type: Array, required: true },
		},
		methods: {
			// 点击选择项
			selected(data) {
				this.$emit("selected", data);
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>

• 子组件

<template>
	<view id="information" class="text-center">
		<!-- 资讯列表 -->
		<MyList :dataList="dataList" @selected="selectedInformation">
			<template v-slot="{ item }">
				<view class="d-flex list-box">
					{{ item.title }}
				</view>
			</template>
		</MyList>
	</view>
</template>

<script>
	import { mapState, mapMutations} from "vuex";
	import MyList from "../../component/list/MyList.vue";

	export default {
		data() {
			return {
				// 列表基础数据
				dataList: [],
			}
		},
		components: {
			MyList,
		},
		onShow() {
			this.dataList = [
				{ id: 1, title: "新闻资讯1" }, { id: 2, title: "新闻资讯2" }, { id: 3, title: "新闻资讯3" }, { id: 4, title: "新闻资讯4" }, { id: 5, title: "新闻资讯5" },
			];
		},
		methods: {
			// 选择资讯
			selectedInformation(data) {
				console.log(data);
			},
		},
	}
</script>

<style lang="scss" scoped>
</style>