微信小程序-单个插槽

简介: 什么是插槽• 插槽就是一个开放的接口,和现实生活中的 USB 插槽一样• 通过插槽开放接口之后,接口要连接什么内容由使用者决定• 所以小程序中,插槽就是一块待替换占位区域,等待使用者使用的时候替换

什么是插槽

  • 插槽就是一个开放的接口,和现实生活中的 USB 插槽一样
  • 通过插槽开放接口之后,接口要连接什么内容由使用者决定
  • 所以小程序中,插槽就是一块待替换占位区域,等待使用者使用的时候替换


如何使用插槽

炒鸡简单,在需要预留的地方使用 <slot> 元素即可。


案例

首先我们创建一个组件,组件大致的内容就是仿造我们常见的京东页面首页的一个 Nav(导航条),直接上 Nav 源码:

<!--components/c-test/c-test.wxml-->
<view class="container">
  <view class="left">
    <text>菜单</text>
  </view>
  <view class="center">
    <text>中间区域</text>
  </view>
  <view class="right">
    <text>登录</text>
  </view>
</view>


/* components/c-test/c-test.wxss */
.container {
  width: 100%;
  height: 80rpx;
  background: #999;
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
  text-align: center;
  background: #f00;
}
.left, .right {
  white-space: nowrap;
}


使用我们自定义的 Nav:

<!--index.wxml-->
<myNav/>


假设我现在有一个需求,想让中间的内容,根据我传入的元素进行展示对应的内容,这个就可以使用我们的插槽进行实现,这里也将会带着大家来使用插槽的用法,更改我们的 Nav 的 wxml 文件:

<!--components/c-test/c-test.wxml-->
<view class="container">
  <view class="left">
    <text>菜单</text>
  </view>
  <view class="center">
    <slot></slot>
  </view>
  <view class="right">
    <text>登录</text>
  </view>
</view>


在我们的首页使用 Nav 的时候也需要进行改造,要告诉我们的插槽,Nav 当中用什么来进行填充:

<!--index.wxml-->
<myNav>
  <input type="text"/>
</myNav>
<myNav>
  <button>我是按钮</button>
</myNav>


到这里我们的插槽就使用到了,是不是炒鸡简单。

目录
相关文章
|
7月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
小程序
微信小程序-slot插槽
微信小程序可有意思了
193 0
|
小程序 JavaScript
微信小程序-多个插槽-具名插槽
如何使用多个插槽 • 如果想要使用多插槽,那么就必须通过 name 属性给每个插槽起一个名称 • 如果想要使用多插槽,那么在添加组件到插槽上的时候,就需要通过 slot="插槽名称" 告诉系统,组件需要添加到哪一个插槽上 • 还有必须在插槽对应的组件的JS文件中,通过 options 中的 multipleSlots: true, 来告诉系统需要开启多插槽
202 0
|
小程序 JavaScript
微信小程序开发入门与实战(插槽及组件页面的生命周期)
微信小程序开发入门与实战(插槽及组件页面的生命周期)
微信小程序开发入门与实战(插槽及组件页面的生命周期)
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
580 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
699 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
125 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
81 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
221 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
74 5