微信小程序的组件封装中插槽的使用

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {

 },
  methods: { 

  }
})

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

 1 // components/popModal/index.js
 2 Component({
 3   /**
 4    * 组件的属性列表
 5    */
 6   options: {
 7     multipleSlots: true  //插槽
 8   },
 9   properties: {
10     animationData: {
11       type : Object,
12       value : {}
13     }
14   },
15 
16   /**
17    * 组件的初始数据
18    */
19   data: {
20     height : wx.getSystemInfoSync().windowHeight,
21     show : false,
22   },
23 
24   /**
25    * 组件的方法列表
26    */
27   methods: {
28     closeModal(){
29       this.setData({
30         show : false,
31         animationData : {}
32       })
33     },
34     showModal(){
35       this.setData({
36         show : true
37       })
38     },
39   }
40 })

 1 <view class="toast-modal-box" wx:if="{{show}}">
 2   <view class="toast-modal-bg" style="height:{{height}}px;" bindtap="closeModal"></view>
 3   <view class="toast-modal-container" animation="{{animationData}}"> 
 4     <!-- 具名插槽 -->
 5     <slot name="header"></slot>  
 6     <slot name="body"></slot>
 7     <!-- 匿名插槽 -->
 8     <slot></slot>
 9   </view>
10 </view>

1 {
2   "usingComponents": {
3     "popModal" : "/components/popModal/index"
4   }
5 }

 1 <!-- 弹出框 -->
 2 <popModal id="showModal" animationData="{{animationData}}">
 3   <view slot="header" class="color-ff">评论 <text class="read-btn">{{userName}}</text> 的评论</view>
 4   <view slot="body" class="color-ff">
 5     <textarea class="mt20 font28" placeholder="请输入你的评论~" value="{{reply}}" bindinput="toReply"></textarea>
 6   </view>
 7   <view class="bottom-btn-box flex3 color-ff">
 8     <view class="active_t bottom-btn clear" bindtap="clearReply">清空</view>
 9     <view class="active_t bottom-btn submit" bindtap="commitReply">发布</view>
10   </view>
11 </popModal>