微信小程序 slot插槽基本使用_小程序插槽

---

前言

小程序中, 如果插槽有必要拿到父组件的数据来展示, 直接父传子即可, 和Vue一样的思路

---

一、基本插槽

参考Vue的基本插槽, 两者的使用思路相同.
子组件开一个<slot>标签表示插槽, 父组件直接在子组件标签之间写入要插入的内容, 这些内容就会自动插入到子组件的第一个基本插槽中, 注意是第一个, 就下面这个例子就可以看出:

<!-- 子组件.wxml -->
<view class="box">
  <slot></slot>  <!-- 基本插槽1 -->
    <view wx:for="{
    {list}}" 
          wx:key="item" 
    >{
  {item}}</view>
  <slot></slot>  <!-- 基本插槽2 -->
</view>
1
2
3
4
5
6
7
8
9
10

虽然这里使用了多个插槽, 但是子组件js里加不加这段无所谓, 因为最终是只有一个插槽, 但是多个具名插槽就要加了, 不然所有具名失效:

//子组件.js
Component({
   
  options: {
   
    multipleSlots: true // 复数插槽: 是
  }
})
1
2
3
4
5
6
7
8

json里规定该目录下作为组件使用而非页面:

//子组件.json
{
   
  "component": true,  //作为组件: 是
  "usingComponents": {
   }
}
1
2
3
4
5
6
7

不加也不会报错, 但所有插槽都是无效的.

之后在父组件里引入子组件:

//父组件.json
{
   
  "usingComponents": {
    
    "navbar": "../../components/NavBar/NavBar"
  }
}
1
2
3
4
5
6
7
8

<!-- 父组件.wxml -->
<navbar model:list="{
    {datalist}}">
  <view>
    <text<
1
2
3
4