前提：
在很多场景下我们希望自定义组件有较好的扩展性，在不传入slot的情况下默认展示默认的结构与样式，但小程序中的slot没有像vue中的slot一样提供默认值，这时候我们可以通过伪类选择器:empty 和相邻选择器+控制元素的display来实现
- 使用自定义组件
<view>
<slot-item>
<button>我是一个按钮</button>
</slot-item>
<slot-item></slot-item>
<slot-item>
<text style="color: red;">我是一个文本</text>
</slot-item>
</view>
- 实现自定义组件
- 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;
}
/* 当插槽内为空时 通过相邻选择器将默认值显示 */
.content:empty+.default {
display: block;
}
