18:slot多插槽

创建pages/component/getmanyslot/getmanyslot

getmanyslot.js:

Component({
//组件的方法列表
  options:{
    multipleSlots:true
  }
})

getmanyslot.json:

{
  "component":true,
  "usingComponents": {}
}

getmanyslot.wxml:

<!--pages/component/getmanyslot/getmanyslot.wxml-->
<view>我是多个组件的开始</view>
<view class="slot1"><slot name="slot1"/></view>
<view class="slot2"><slot name="slot2"/></view>
<view class="slot3"><slot name="slot3"/></view>
<view>我是多个组件的结束</view>

test.json:

"usingComponents": {
    "get-manyslot":"/pages/component/getmanyslot/getmanyslot"
  }

test.wxml:

<get-manyslot>
   <slider slot="slot2"/>
   <button size="mini" slot="slot1">我是插入多个插槽的按钮</button>
   <text slot="slot3">我是slot3哈哈哈哈哈哈</text>
</get-manyslot>

test.wxml中注意：
1:多个插槽时给每个插槽起个名字，而且test.wxml中slot中写getmanyslot.wxml中的slot标签中name。
2:必须在getmanyslot.js 中Component对象中添加一个选项：options multipleSlots:true。
3:这里展示顺序取决于getmanyslot.wxml中view从上到下的顺序。

效果：