如何使用多个插槽
- 如果想要使用多插槽，那么就必须通过 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>
