微信小程序文档 - slots介绍
由上述文档看俩来,微信小程序官方并没有提及动态插槽内容。
uniapp文档 - slots介绍
uni官方也未提及关于动态插槽的内容
在实际使用中,直接通过 <<slot :name="item.xxx" /> 这种形式会报错,
网上搜了大量资料发现只能通过条件编译的方式
下面是兼容微信小程序和h5的代码:
定义组件:
<!-- HACK: uni-app 处理动态 slot 名字不兼容,需要使用不同的语法 -->
<!-- #ifdef H5 -->
<slot :name="`tab:${item.key}`"></slot>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN-->
<slot name="tab:{{item.key}}"></slot>
<!-- #endif -->
使用组件 :文章来源:https://www.toymoban.com/news/detail-727904.html
<view>
<!-- HACK: uni-app 处理动态 slot 名字不兼容,需要使用不同的语法 -->
<!-- #ifdef H5 -->
<template v-for="item in list" :slot="`tab:${item.id}`">
<post-list :key="item.id" />
</template>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN-->
<template v-for="item in lits" slot="tab:professional:{{item.id}}">
<post-list :key="item.id" />
</template>
<!-- #endif -->
</view>
以上解决办法来源于资料:动态插槽名问题讨论和 HACK 方案 - DCloud问答文章来源地址https://www.toymoban.com/news/detail-727904.html
到了这里,关于微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!