前提：
在很多場景下我們希望自定義組件有較好的擴展性，在不傳入slot的情況下默認展示默認的結(jié)構(gòu)與樣式，但小程序中的slot沒有像vue中的slot一樣提供默認值，這時候我們可以通過偽類選擇器:empty 和 相鄰選擇器+控制元素的display來實現(xiàn)

• 使用自定義組件

<view>
  <slot-item>
    <button>我是一個按鈕</button>
  </slot-item>
  <slot-item></slot-item>
  <slot-item>
    <text style="color: red;">我是一個文本</text>
  </slot-item>
</view>

• 實現(xiàn)自定義組件
  • wxml

<view class="container">
  <view>我是header</view>
  <view class="content">
    <slot></slot>
  </view>
  <!-- 插槽默認值 -->
  <view class="default">我是slot默認值</view>
  <view>我是footer</view>
</view>

• wxss

.default {
  width: 200rpx;
  height: 200rpx;
  background-color: #f99;
  text-align: center;
  line-height: 200rpx;
  margin: 0 auto;
  /* 默認值默認不顯示 */
  display: none;
}

/* 當插槽內(nèi)為空時 通過相鄰選擇器將默認值顯示 */
.content:empty+.default {
  display: block;
}