>[success] # 插槽 1. 組件的插槽也是為了讓我們封裝的組件更加具有擴展性。 2. 使用 `<slot>` 標簽預留插槽 3. 多個插槽的時候使用`name ` 屬性進行占位，并且在對應js 文件配置`multipleSlots:true` ~~~ Component({ options: { multipleSlots: true } }) ~~~ >[danger] ##### 單個標簽插槽 1. 小程序的插槽不支持默認值，因此想默認值需要使用`css` 幫助來實現 * 定義一個組件 ~~~html <view> <view>單個插槽</view> <view class="content"> <!-- 小程序中插槽是不支持默認值的 --> <slot></slot> </view> <!-- 利用css 做默認值 --> <view class="default">哈哈哈哈</view> </view> ~~~ * `wxss` 文件，利用`css `如果`content `為空那么他的兄弟 `default`元素 則顯示 ~~~css .default { display: none; } .content:empty + .default { display: block; } ~~~ * 使用組件 ~~~ { "usingComponents": { "slot-demo":"/componets/single-slot/single-slot" } } ~~~ ~~~html <slot-demo> 添加默認值 </slot-demo> ~~~ >[danger] ##### 多個插槽  ~~~ html <view class="mul-slot"> <view class="letf"> <slot name="left"></slot> </view> <view class="center"> <slot name="center"></slot> </view> <view class="right"> <slot name="right"></slot> </view> </view> ~~~ ~~~ .mul-slot { display: flex; text-align: center; } .right,.left{ width: 160rpx; } .center { flex: 1; } ~~~ ~~~ Component({ options: { multipleSlots: true } }) ~~~ * 如果已經注冊使用 ~~~html <mul-slot> <button slot="left" size="mini">left</button> <view slot="center">哈哈哈</view> <button slot="right" size="mini">right</button> </mul-slot> ~~~