微信小程序 - 组件wxml中slot

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

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

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

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

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

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

<!-- 引用组件的页面模板 -->
<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>
组件样式

相关推荐

  1. 程序 - 组件wxmlslot

    2024-03-10 13:18:03       21 阅读
  2. 程序WXML

    2024-03-10 13:18:03       10 阅读
  3. 程序-wxml语法

    2024-03-10 13:18:03       23 阅读
  4. 程序如何实现WXML和js文件之间的数据交互

    2024-03-10 13:18:03       44 阅读
  5. 程序】wxss 和 css 、wxml 和 html 区别

    2024-03-10 13:18:03       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-10 13:18:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-10 13:18:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-10 13:18:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-10 13:18:03       20 阅读

热门阅读

  1. 新概念英语第二册(74)

    2024-03-10 13:18:03       19 阅读
  2. Node.js 简介以及安装

    2024-03-10 13:18:03       22 阅读
  3. Matlab

    Matlab

    2024-03-10 13:18:03      20 阅读
  4. go - 学习笔记 -2

    2024-03-10 13:18:03       19 阅读
  5. excel数据导入到数据库的方法

    2024-03-10 13:18:03       21 阅读
  6. 鼎盛合|无线麦克风音频方案

    2024-03-10 13:18:03       19 阅读
  7. C语言:苹果和虫子

    2024-03-10 13:18:03       18 阅读
  8. SpringBoot 集成xxl-job

    2024-03-10 13:18:03       24 阅读