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

显示效果:

相关推荐
2501_933907211 小时前
上海本凡科技的微信小程序公司主要提供哪些服务?
科技·微信小程序·小程序
码农客栈1 小时前
小程序学习(十七)之获取前台分类数据并渲染
小程序
2601_949804921 小时前
【全开源】AJAX家政上门服务系统小程序自营+多商家(高级授权)+独立端
小程序
h7ml1 小时前
查券返利机器人图像识别:OpenCV 模板匹配对抗淘宝小程序动态化骨架屏
opencv·小程序·机器人
低代码布道师1 小时前
教培管家第14讲:家长端——打造合规且顺畅的登录门户
低代码·小程序·云开发
说私域2 小时前
私域流量生态重构:链动2+1模式S2B2C商城小程序的流量整合与价值创造
人工智能·小程序·流量运营·私域运营
说私域2 小时前
AI智能名片S2B2C商城小程序赋能下线上向线下导流的机制与效果研究——基于线下专属优惠券的视角
人工智能·小程序·流量运营·私域运营
2501_915921432 小时前
不用 Xcode 上架 iOS,拆分流程多工具协作完成 iOS 应用的发布准备与提交流程
android·macos·ios·小程序·uni-app·iphone·xcode
CHU7290352 小时前
探索一番赏盲盒小程序:解锁多元互动体验新场景
小程序·php
2601_949804922 小时前
【全开源】西陆家政系统源码小程序(FastAdmin+ThinkPHP+原生微信小程序)
微信小程序·小程序