在我們封裝組件的時候，有些時候，我們需要使用類似于vue中的slot插槽；
小程序借鑒了這個優秀的想法；
在小程序中，組件模板中可以提供一個 <slot> 節點，用于承載組件引用時提供的子節點。

組件

<view class="cont">
    <view>
        我是組件
    </view>
    <slot></slot>
</view>

頁面使用

xxx.json 引入注冊組件

{
  "usingComponents": {
    "listview":"/components/listview/list"
  }
}

<listview>
    <view>
        我是插入的第一條數據
    </view>
    <view>我是插進入的第二天數據
    </view>
</listview>

在組件的 wxml 中可以包含 slot 節點，用于承載組件使用者提供的 wxml 結構。
默認情況下，一個組件的 wxml 中只能有一個 slot 。需要使用多 slot 時，可以在組件 js 中聲明啟用。

ps：組件對應 wxss 文件的樣式，只對組件wxml內的節點生效。編寫組件樣式時，需要注意以下幾點：
1==>組件和引用組件的頁面不能使用id選擇器（#a）、屬性選擇器（[a]）和標簽名選擇器，請改用class選擇器。（注意）

2==> 組件件和引用組件的頁面中使用后代選擇器（.a .b）在一些極端情況下會有非預期的表現，如遇，請避免使用。

3==>子元素選擇器（.a>.b）只能用于 view 組件與其子節點之間，用于其他組件可能導致非預期的情況。

4==>繼承樣式，如 font 、 color ，會從組件外繼承到組件內。（重點）

5==>除繼承樣式外， app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效（除非更改組件樣式隔離選項）。

什么是組件樣似隔離選項

默認情況下，自定義組件的樣式只受到自定義組件 wxss 的影響。除非以下兩種情況：

（1）app.wxss 或頁面的 wxss 中使用了標簽名選擇器（或一些其他特殊選擇器）來直接指定樣式，
 這些選擇器會影響到頁面和全部組件。通常情況下這是不推薦的做法。
 比如說你在app.wxss中定義了
 view{color:red}；
 你使用了標簽選擇器，那么頁面以及所有組件
 字體顏色是紅色哈~；


（2） 指定特殊的樣式隔離選項 styleIsolation
isolated 表示啟用樣式隔離，在自定義組件內外，使用 class 指定的樣式將不會相互影響（一般情況下的默認值）；
apply-shared 表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會影響頁面；
shared 表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設置了 apply-shared 或 shared 的自定義組件。（這個選項在插件中不可用。）

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

組件

組件.js中

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

<view class="cont">
    <slot name="before"></slot>
    <view>這里是組件的內部細節</view>
    <slot name="after"></slot>
</view>

父頁面使用

<listview>
     <!-- 這部分內容將被放置在組件 <slot name="before"> 的位置上 -->
        <view slot="before">這里是插入到組件"before"</view>
    <!-- 這部分內容將被放置在組件 <slot name="after"> 的位置上 -->
    <view slot="after">這里是插入到組件"after"的內容</view>
</listview>