微信小程序-插槽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 小时前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
人还是要有梦想的18 小时前
如何开发小程序介绍
小程序·notepad++
roamingcode19 小时前
支付宝小程序数据可视化避坑指南:@antv/f2 踩坑与最佳实践
信息可视化·小程序·canvas·antv
2501_9159214321 小时前
HTTP和HTTPS协议全面解析:技术原理与安全应用
安全·http·ios·小程序·https·uni-app·iphone
double_eggm1 天前
微信小程序2
微信小程序·小程序
是江迪呀2 天前
实时看大家都在干嘛?我靠一行监听函数,做了个轻互动小程序
前端·微信小程序
码视野2 天前
课后报名小程序 — 从需求到原型的全栈实践
小程序
打瞌睡的朱尤2 天前
微信小程序1~25
微信小程序·小程序
hnxaoli2 天前
win10小程序(十八)剪切板循环粘贴
python·小程序
拖孩2 天前
我用 AI 搓了一个"比谁更持久"的微信小游戏,AI实现只用了一天,微信审核却用了一个月!!!
微信小程序·ai编程·游戏开发