插槽<slot>相当于是占位符 留给组件使用者使用

一、默认只支持单个插槽

1、例如声明一个组件
<view><view>这里是组件的内部结构</view><slot></slot><view>组件结束</view>
</view>
2、引入此组件
"usingComponents": {"my-test4": "/components/test4/test4"
},
3、使用时
<my-test4><text>插槽的位置</text>
</my-test4>

二、启用多个插槽

1、在组件的js文件中与properties平级的位置写入
options: {multipleSlots: true
},
2、创建多个插槽时使用name属性区分
<view><view>这里是组件的内部结构</view><slot name="before"></slot><slot name="after"></slot><view>组件结束</view>
</view>
3、使用时加入slot属性,值为声明插槽时指定的name值
<my-test4><text slot="before">插槽的位置before</text><text slot="after">插槽的位置after</text>
</my-test4>

微信小程序自定义组件 插槽相关推荐

  1. 微信小程序 自定义组件 插槽slot

    自定义组件中插槽slot,顾名思义,就是在组件中存放的占位符,具体内容由组件的使用者指定 插槽slot分为 单个插槽 多个插槽 单个插槽的使用方式: 在组件的wxml页面中定义slot <vie ...

  2. 微信小程序自定义组件——插槽

    1.插槽:在自定义组件的 wxml 结构中,可以提供一个 <slot> 节点(插槽),用于承载组件使用者提供的 wxml 结构. 2. 单个插槽 在小程序中,默认每个自定义组件中只允许使用 ...

  3. 微信小程序--自定义组件(超详细 从新建到使用)

    微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...

  4. 微信小程序自定义组件的基本使用

    微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...

  5. 微信小程序自定义组件方案

    前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

  6. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

  7. 微信小程序自定义组件(二)

    微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...

  8. 微信小程序自定义组件子传父详解(多图)

    微信小程序自定义组件子传父详解 前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...

  9. 基于canvas 2D实现微信小程序自定义组件-环形进度条

    基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...

最新文章

  1. Python+OpenCV实现AI人脸识别身份认证系统(2)—人脸数据采集、存储
  2. 为什么我们都要等到失去后才知道珍惜呢(转载)
  3. python将数字转变为中文读法-Python转换数字到中文大写格式
  4. 广东省广播电视网络股份有限公司佛山分公司BOSS系统容灾中心建设项目
  5. APIGEE – API网关简介
  6. LeetCode 778. 水位上升的泳池中游泳(二分查找+dfs)
  7. Redis面试 - 如何保证 redis 的高并发和高可用?
  8. 【汇编优化】之x86架构intrinsic优化
  9. 还没买到票?快试试这个Python开源工具,支持多任务抢票
  10. 最新发布!迅雷精简版 4.0.3 Mac中文版
  11. python 反传播_反向传播算法详解和Python代码实现
  12. HTML kind属性怎么用?
  13. 太极定二仪,清浊始以形:红黑树的实现和性质
  14. 教学用计算机报废年限,教学科研仪器设备报废管理办法
  15. win7开机启动项设置_Win7电脑如何提高开机速度?
  16. Autojs获取GPS定位信息
  17. 洛谷P2071 座位安排
  18. oracle内存管理模式amm,Oracle 11g自动内存管理(AMM)相关的初始化参数
  19. Python操作word手册,与打包生成word文件
  20. yarn computed integrity doesn‘t match our records 错误

热门文章

  1. 使用php递归计算目录大小
  2. 分享我的学习方法——还是坚持+努力
  3. JBPM4.4总结-嵌入自己的用户体系(集成自定义用户表)
  4. [zz]很详细,涵盖了多数场景!推荐 - python 的日志logging模块学习
  5. mkhd中的matrix
  6. DataCapa 启动
  7. Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置
  8. vant-联系人卡片
  9. Tips--Ubuntu16.04系统安装时无法连接WiFi
  10. 外链引入css有哪些方式_外链怎么发才会快速收录?