微信小程序 - 组件wxml中slot

在组件的 wxml 中可以包含 slot 节点,用于承载组件使用者提供的 wxml 结构。

默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。

javascript 复制代码
Component(
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    }
    properties: { /* ... */ },
    methods: { /* ... */ }
)

此时,可以在这个组件的 wxml 中使用多个 slot ,以不同的 name 来区分。

html 复制代码
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

使用时,用 slot 属性来将节点插入到不同的 slot 上。

html 复制代码
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>
组件样式
相关推荐
hunzi_116 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
2305_7978820918 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘19 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理21 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09291 天前
微信小程序 request 流式数据处理
微信小程序
人人题1 天前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛2 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470502 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
web_Hsir2 天前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 天前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app