当前位置: 首页 > news >正文

微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽

微信小程序文档 - 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 -->

使用组件 :

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

http://www.lryc.cn/news/154113.html

相关文章:

  • l8-d6 socket套接字及TCP的实现框架
  • ChatGPT AIGC 完成动态堆积面积图实例
  • 虹科产线实时数采检测方案——高速采集助力智能化升级
  • 用迅为RK3568开发板使用OpenCV处理图像颜色通道提取ROI
  • 低压配电室电力安全解决方案
  • 【Windows 常用工具系列 11 -- 笔记本F5亮度调节关闭】
  • Python小知识 - 【Python】如何使用Pytorch构建机器学习模型
  • 使用Akka的Actor模拟Spark的Master和Worker工作机制
  • 文心一言api接入如何在你的项目里使用文心一言
  • Python匿名函数lambda(R与Python第五篇)
  • 【2023校园招聘】 钉钉AI应用开发平台开始校招拉~
  • Linux系统gdb调试常用命令
  • Sumo中Traci.trafficlight详解(上)
  • 手写Mybatis:第13章-通过注解配置执行SQL语句
  • spring security - 快速整合 springboot
  • NPM 常用命令(二)
  • ctfhub ssrf(3关)
  • 跨源资源共享(CORS)Access-Control-Allow-Origin
  • 【嵌入式软件开发 】学习笔记
  • CentOS 7上安装Python 3.11.5,支持Django
  • COMPFEST 15H「组合数学+容斥」
  • react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react
  • 【C++入门】string类常用方法(万字详解)
  • 大数据错误
  • 【Node.js】Express-Generator:快速生成Express应用程序的利器
  • SpringMVC的工作流程及入门
  • logging.level的含义及设置 【java 日志 (logback、log4j)】
  • 第 3 章 栈和队列(链栈)
  • 嵌入式面试-经典问题
  • ZLMeidaKit在Windows上启动时:计算机中丢失MSVCR110.dll,以及rtmp推流后无法转换为flv视频流解决