微信小程序文檔 - slots介紹
由上述文檔看倆來,微信小程序官方并沒有提及動態(tài)插槽內(nèi)容。
uniapp文檔 - slots介紹
uni官方也未提及關(guān)于動態(tài)插槽的內(nèi)容
在實(shí)際使用中,直接通過 <<slot :name="item.xxx" /> 這種形式會報錯,
網(wǎng)上搜了大量資料發(fā)現(xiàn)只能通過條件編譯的方式?
下面是兼容微信小程序和h5的代碼:
定義組件:?
<!-- HACK: uni-app 處理動態(tài) slot 名字不兼容,需要使用不同的語法 -->
<!-- #ifdef H5 -->
<slot :name="`tab:${item.key}`"></slot>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN-->
<slot name="tab:{{item.key}}"></slot>
<!-- #endif -->
使用組件 :文章來源:http://www.zghlxwxcb.cn/news/detail-727904.html
<view>
<!-- HACK: uni-app 處理動態(tài) 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>
以上解決辦法來源于資料:動態(tài)插槽名問題討論和 HACK 方案 - DCloud問答文章來源地址http://www.zghlxwxcb.cn/news/detail-727904.html
到了這里,關(guān)于微信小程序slot插槽的介紹,以及如何通過uniapp使用動態(tài)插槽的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!