微信小程序-插槽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>

显示效果:

相关推荐
烟囱土著15 小时前
如何让相册「动」起来❓看这里❗
微信·微信小程序·小程序
azhou的代码园1 天前
基于SpringBoot与微信小程序的招聘管理系统的设计与实现
spring boot·微信小程序·毕业设计·求职招聘小程序
蓝帆傲亦1 天前
Web前端Mock数据实战指南:正确使用Mock.js提升开发效率
微信小程序·小程序·uni-app
00后程序员张1 天前
iOS 应用代码混淆,对已编译 IPA 进行类与方法混淆
android·ios·小程序·https·uni-app·iphone·webview
kyh10033811201 天前
微信小游戏《找茬找汉字闯关王》开发实战:送全部源码
microsoft·微信·微信小程序·小程序·微信小游戏·汉字找茬找梗
汤姆yu1 天前
基于微信小程序的校园快递代取系统
微信小程序·小程序
albert-einstein1 天前
微信小程序反编译(不通过模拟器进行反编译)
微信小程序·小程序
CodeLove·逻辑情感实验室2 天前
2026年度深度测评:亲测3款免费“聊天回复”神器,谁才是社交黑科技?
科技·小程序·aigc·aigc实测
2501_915918412 天前
mobileprovision 描述文件内容查看,查看 Bundle ID、证书指纹等来定位安装与签名问题
android·ios·小程序·https·uni-app·iphone·webview
毕设源码纪师姐2 天前
计算机毕设 java 基于微信小程序的社区物资订购系统 基于 SpringBoot 的微信小程序社区物资采购平台 Java 社区物资订购与配送管理系统
java·微信小程序·课程设计