微信小程序-插槽slot

一.插槽slot

在页面使用自定义组件的时候,如果在自定义组件里面写子组件,子组件的内容无法显示。

复制代码
<custom01>
<text slot='slot-top'>你好,上方组件</text>
你好,组件
<text slot='slot-bottom'>你好,下方组件</text>
</custom01>

如上面的文本内容是无法显示在自定义组件里面的。

因为如果我们想要自定义组件的内容也可以显示就需要一个占位符或者卡槽,把子节点的内容插进去。

二.如何使用slot卡槽

定义: slot组件是一个自定义组件的卡槽,用来接收自定义组件节点内的组件。

默认slot组件的写法 < slot / >,只能替代自定义组件内的一个子节点。

具名slot组件的写法< slot name='slot1' />,在子节点里可以这样使用

< text slot='slot1'>你好,上方组件</ text >

这样就可以显示:"你好,上方组件"的文本了

具体步骤如下:

在自定义组件.js文件的options里面注册多slot组件,因为默认只有一个

复制代码
Component({
  options:{
    multipleSlots:true
  }
  })

在自定义组件.wxml文件里写slot插槽

复制代码
<view>
<!-- 具名卡槽 -->
<slot name='slot-top' />
<!-- slot是一个卡槽,展示子节点内容 -->
<view>
<slot />
</view>
<slot name='slot-bottom' />
</view>

在page页面使用自定义组件,并传递子节点

复制代码
<custom01>
<text slot='slot-top'>你好,上方组件</text>
你好,组件
<text slot='slot-bottom'>你好,下方组件</text>
</custom01>

显示效果:

相关推荐
wx_ywyy67987 小时前
团购小程序区域化运营:多门店管理、配送范围设置与本地化活动开发
小程序·小程序开发·商城小程序·小程序制作·团购小程序·团购小程序开发·电商小程序
從南走到北7 小时前
JAVA同城服务场馆预约门店预约健身房瑜伽馆预约系统支持H5小程序APP源码
java·开发语言·小程序
韩立学长7 小时前
【开题答辩实录分享】以《智慧农业信息化服务平台小程序》为例进行答辩实录分享
数据库·spring boot·小程序
Lsx-codeShare8 小时前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app
低代码布道师9 小时前
医疗小程序08科室管理
低代码·小程序
00后程序员张10 小时前
接口调试从入门到精通,Fiddler抓包工具、代理配置与HTTPS抓包实战技巧
前端·ios·小程序·https·fiddler·uni-app·webview
说私域11 小时前
“开源链动2+1模式AI智能名片S2B2C商城小程序”赋能同城自媒体商家营销创新研究
人工智能·小程序·开源
说私域17 小时前
AI智能名片链动2+1模式S2B2C商城小程序在客服沟通中的应用与效果
人工智能·小程序
游戏开发爱好者81 天前
iOS IPA 上传工具全面解析,从 Transporter 到开心上架(Appuploader)命令行的高效上架实践
android·ios·小程序·https·uni-app·iphone·webview
阿里花盘1 天前
培训机构如何利用小程序线上引流招生?培训机构小程序开发教程
小程序