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

这篇具有很好参考价值的文章主要介绍了微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序文档 - slots介绍

微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽,uniapp(小程序),微信小程序,小程序由上述文档看俩来,微信小程序官方并没有提及动态插槽内容。

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问答文章来源地址https://www.toymoban.com/news/detail-727904.html

到了这里,关于微信小程序slot插槽的介绍,以及如何通过uniapp使用动态插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序发布上线流程以及个人小程序怎么通过审核

    小程序如何 发布 ?微信小程序发布流程其实很简单,本文就介绍下如何 发布上线 流程以及个人小程序怎么 通过审核 小程序在开发完成后,需要 上传代码 ,设为 体验版本 , 提交审核 , 发布上线 这几个基本步骤 1.提交代码 通过微信开发者工具提交代码 点击后,会让你设

    2024年02月09日
    浏览(62)
  • vue3 slot 插槽 在h函数中如何使用

    vue3已经出了有一段时间了,越来越多的小伙伴开始用vue3来写项目。开发过程中难免会用到h函数, 有时候会使用h函数封装一些组件,封装组件又会用到插槽。所以呢对于在h函数中如何使用插槽稍作了整理,希望能帮到帮接触h函数的小伙伴。 这里只讲解插槽的用法,不涉及

    2024年02月09日
    浏览(36)
  • 微信小程序之获取定位数据以及通过坐标获取详细地址数据

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月06日
    浏览(67)
  • 【微信小程序】生命周期,插槽和组件间通信

    1.1 组件全部的生命周期函数 小程序组件可用的全部生命周期如下表所示 生命周期函数 参数 描述说明 created 无 在组件实例刚刚被创建时执行 attached 无 在组件实例进入页面节点树时执行 ready 无 在组件在视图层布局完成后执行 moved 无 在组件实例被移动到节点树另一个位置时

    2024年02月11日
    浏览(55)
  • 微信小程序通过js动态修改css样式的方法,以及css变量

    不知道各位小帅有没有遇到这种问题,在微信小程序开发的时候,我们想要将某个文字大小变大,那么本篇文章就是解决这个问题。

    2024年02月06日
    浏览(53)
  • 微信小程序-----账号注册以及开发软件的下载与代码结构介绍

    目录 前言 微信小程序 1.微信小程序简单介绍 2.小程序与普通网页开发的区别 注册小程序开发帐号  微信小程序开发者工具下载 项目结构 1.小程序项目整体结构  2.小程序页面的组成部分 小程序组成部分 1. JSON 配置文件的作用 2. app.json 文件  3. project.config.json 文件  4. sitem

    2024年01月17日
    浏览(73)
  • 微信小程序如何通过code拿到用户的openid?

    微信有一个静默登录,当进入小程序,页面加载完之后就会默认登录拿到code,这时候我们只需要将拿到的code去调后端的登录接口即可拿到用户的openid,openid在后续的开发中可能经常要用到,可以将其放到storage中,随用随拿

    2024年02月16日
    浏览(58)
  • 微信小程序是如何上传文件以及下载文件

    微信小程序可以使用wx.uploadFile() API来上传文件,使用wx.downloadFile() API来下载文件。 上传文件的步骤如下: 1、创建一个选择文件的按钮。 2、用户点击按钮后,调用wx.chooseImage()方法来选择文件。 3、调用wx.uploadFile()方法上传文件。 示例代码如下: 下载文件的步骤如下: 1、创

    2024年02月11日
    浏览(51)
  • 【小程序】封装时间选择组件:用单元格van-cell和插槽slot,包括起始时间和终止时间

    可以选择起始时间和终止时间,并显示。 时间选择器放在van-cell的value插槽中。 用的库: https://vant-contrib.gitee.io/vant-weapp/#/home https://dayjs.fenxianglu.cn/category/ 用的组件:Cell单元格、DatetimePicker时间选择、Popup弹出层 HTML 注意,这里的van-cell的value放的是时间选择器,以 插槽 的形

    2024年02月12日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包