The introduction of the WeChat applet slot and how to use the dynamic slot through uniapp

WeChat Mini Program Documentation - Introduction to slots

Judging from the above documents, the official WeChat applet does not mention the content of dynamic slots.

uniapp documentation - slots introduction

The uni official also did not mention the content about dynamic slots

In actual use, an error will be reported directly through the form of <<slot :name="item.xxx" />,

I searched a lot of information on the Internet and found that it can only be compiled by condition 

The following is the code compatible with WeChat applet and h5:

Define components: 

<!-- HACK: uni-app 处理动态 slot 名字不兼容,需要使用不同的语法 -->  
<!-- #ifdef H5 -->  
<slot :name="`tab:${item.key}`"></slot>  
<!-- #endif -->  
<!-- #ifdef MP-WEIXIN-->  
<slot name="tab:{
   
   {item.key}}"></slot>  
<!-- #endif -->

Use components:

<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>

The above solution comes from the information: Dynamic slot name discussion and HACK solution - DCloud Q&A

Guess you like

Origin blog.csdn.net/m0_57033755/article/details/132670281