微信小程序-单个插槽

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-14

46.微信小程序-单个插槽2023-05-15

47.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

什么是插槽

• 插槽就是一个开放的接口，和现实生活中的 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>

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