Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

快手小程序渲染for循环内的插槽不正确,请大佬指点,谢谢 #5280

Closed
czmCWH opened this issue Jan 5, 2025 · 1 comment
Labels

Comments

@czmCWH
Copy link

czmCWH commented Jan 5, 2025

uni-app开发定一个dk-tabs组件,如下代码所示:

<script type="text/javascript">
	const tabs = ref([{ name: '关注', id: 1}, {name: '美食', id: 6}])
</script>

<template>
	<view class="main">
		<view v-for="(item, index) in tabs" :key="index">
			<view style="font-size:24px">标题</view>
			<slot name="content" :item="item" :index="index"></slot>
		</view>
	</view>
</template>

然后使用 dk-tabs 组件,如下所示:

<dk-tabs>
	<template #content="{ item, index }">
		<text>{{ item.name + index }}</text>≈
	</template>
</dk-tabs>

但是运行到快手小程序时,渲染的内容却不正常,为 “关注1美食6 关注1美食6”,而不是正常的 “关注1 美食6”,这该如何解决

uni-app论坛上也有这个问题,https://ask.dcloud.net.cn/question/197861,但没有人解决,求指教。

@Otto-J
Copy link
Member

Otto-J commented Jan 17, 2025

问题已回复在 ASK 问题 上,如评论所说,同一个组件多次出现同名 slot 如何表现表现不一致。

微信小程序中会告警

More than one slot named "before" are found inside a single component instance

这个可以长期和不同平台厂商沟通推动统一,短期看还是建议规避这种写法。具体可行的做法就是在父组件中执行 v-for 避免在子组件中出现多次 slot 相同 name。

@Otto-J Otto-J added the 评论中有最佳答案 replay best label Jan 17, 2025
@Otto-J Otto-J closed this as completed Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants