微信小程序-多个插槽-具名插槽

如何使用多个插槽

• 如果想要使用多插槽，那么就必须通过 name 属性给每个插槽起一个名称
• 如果想要使用多插槽，那么在添加组件到插槽上的时候，就需要通过 slot="插槽名称" 告诉系统，组件需要添加到哪一个插槽上
• 还有必须在插槽对应的组件的JS文件中，通过 options 中的 multipleSlots: true, 来告诉系统需要开启多插槽

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

废话不多说直接上代码：

c-test.wxml:

<!--components/c-test/c-test.wxml-->
<view class="container">
  <view class="left">
    <slot name="leftSlot"></slot>
  </view>
  <view class="center">
    <slot name="centerSlot"></slot>
  </view>
  <view class="right">
    <slot name="rightSlot"></slot>
  </view>
</view>

c-test.js:

// components/c-test/c-test.js
Component({
  options: {
    multipleSlots: true
  },
})

index.wxml:

<!--index.wxml-->
<myNav>
  <text slot="leftSlot">我是左边</text>
  <input slot="centerSlot" type="text"/>
  <button slot="rightSlot">我是按钮</button>
</myNav>