1.新建一個組件：新建一個components文件夾 ->再建一個組件文件夾 ->右鍵：新建component
2.組件接收的值，以及設置默認值
```
properties: {
title:{
type : String, //類型
value : "默認標題", //默認值
},
},
```
3.在需要用到的文件中的json中引入
```
"usingComponents": {
"header" : "/components/header/index"
}
```
4.wxml中使用
```
<view>
<header title="推薦歌曲"><view>222</view></header>
</view>
```
**案例：封裝一個頭部組件，右側內容可能有也可能沒有，方案一：再定義一個變量控制右側顯示**
**重點學習**：方案二：使用css的偽類（empty）和“+”連接符去動態控制元素顯示隱藏
問題：小程序中使用插槽，如果你有默認的內容，再傳了插槽的內容進去，和vue不同的是兩個都會顯示出來（vue中默認的內容將不顯示），
```
<!--components/header/index.wxml-->
<view class="header">
<view class="title">{{title}}</view>
<!-- 右側內容 -->
<view class="right" wx:if="{{showRight}}">
<!-- 插槽內容 -->
<view class="slot">
<slot></slot>
</view>
<!-- 默認顯示內容 -->
<view class="defult">
<text>{{rightTitle}}</text>
<image class="icon" src="/assets/images/jiantou.png"></image>
</view>
</view>
</view>
```
```/* 判斷當.solt這個類下面的元素是空的時候（也就是沒有使用插槽，使用‘+’連接符，給.defult這個類設置樣式） */
.header .slot:empty + .defult{
display: flex;
}
.header .defult{
/* 默認不顯示 */
display: none;
align-items: center;
font-size: 28rpx;
color: #777;
}
```
效果：
1.當插槽沒有內容時，默認顯示的更多
```
<view>
<header title="推薦歌曲"></header>
</view>
```
2.當有插槽內容時，顯示的是插槽的內容
```
<view>
<header title="推薦歌曲">
<view>插槽內容</view>
</header>
</view>
```
*****
拓展：vue中使用插槽
```
組件
<template>
<div>
<slot>
<div>我是默認內容</div>
</slot>
</div>
</template>
```
引入后沒有傳內容，顯示的是默認的
```
組件中傳內容
<ceshi>
<div>我是修改后的內容</div>
</ceshi>
```
