uni-app项目实战笔记4--使用组件具名插槽slot定义公共标题模块
先来看效果：
如图，“每日推荐”，“专题精选”这些公共标题有相同的地方，也有自己的独特的地方，像这类有共性又有个性的可考虑使用slot插槽来实现。
实现步骤：
1.在前面文章创建的公共组件common-title定义具名插槽方便调用:
<view class="common-title"><view class="name"><slot name="name"></slot></view><view class="custom"><slot name="custom"></slot></view>
</view>css样式：
<style lang="scss" scoped>.common-title{display: flex;padding: 0 30rpx;justify-content: space-between;display: flex;align-items: center;.name{font-size: 40rpx;}}
</style>
2.使用插槽：
<common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#28b389"></uni-icons><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></template>
</common-title>CSS代码：
.date{display: flex;align-items: center;margin-left: 5rpx;color: #28b389;}
有共性的地方--标题，我们使用name插槽，个性化的地方使用custom插槽。
上面的代码中使用uniapp的日期格式化扩展组件：uni-app官网
它的属性配置主要有以下几项：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| date | Object|String|Number | Date.now() | 要格式化的日期对象/日期字符串/时间戳 |
| threshold | Array | [0, 0] | 转化类型阈值 |
| format | String | 'yyyy/MM/dd hh:mm:ss' | 格式字符串 |
| locale | String | zh | 格式化使用的语言，目前支持zh（中文）、en（英文） |
Threshold Options
格式化组件会对时间进行用户友好转化，threshold就是用来控制转化的时间阈值的。
以
[60000, 3600000]为例，将传入时间与当前时间差的绝对值记为delta（单位毫秒）
delta < 60000时，时间会被转化为“刚刚|马上”delta >= 60000 && delta < 3600000时，时间会被转化为“xx分钟前|xx分钟后”，如果超过1小时会显示成“xx小时前|xx小时后”，以此类推delta >= 3600000时，会按照format参数传入的格式进行格式化如果不想转化为“马上|刚刚”可以传入
:threshold = "[0,3600000]"。默认值[0,0]既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”#Format Options
format接收字符以及含义如下：
| 字符 | 说明 |
|---|---|
| yyyy | 四位年份 |
| yy | 两位年份 |
| MM | 两位月份（不足两位在前面补0） |
| M | 月份，不自动补0 |
| dd | 两位天（不足两位在前面补0） |
| d | 天，不自动补0 |
| hh | 两位小时（不足两位在前面补0） |
| h | 小时，不自动补0 |
| mm | 两位分钟（不足两位在前面补0） |
| m | 分钟，不自动补0 |
| ss | 两位秒（不足两位在前面补0） |
| s | 秒，不自动补0 |
| SSS | 三位毫秒（不足三位在前面补0） |
| S | 毫秒，不自动补0 |
专题精选部分：
<view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="" class="more">More</navigator></template></common-title>
</view>CSS部分：
.theme{padding-top: 50rpx;.more{font-size: 32rpx;color:#888;}}