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

显示效果:

相关推荐
Goona_7 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
笨笨狗吞噬者7 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手9 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小510 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人11 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟13 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄13 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐13 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域16 小时前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
_AaronWong17 小时前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app