Vue中插槽的使用。

寫在前面：

vue中插槽的使用讓元件變得更加靈活。使得封裝乙個元件的復用性和api的暴露更加靈活多變。

當元件當做標籤使用的時候，在標籤裡面的元素不會顯示，這個時候就需要用到插槽。

一、最基本的使用

當元件當做標籤使用的時候，在元件標籤內部的標籤往往不顯示，這個時候就需要用到插槽。寫在元件標籤內部的標籤需要在該元件標籤內部使用solt接收，solt標籤會將所有標籤在同一位置接收顯示。但是靈活的不高。

二、命名插槽的使用

給元件標籤內部標籤新增乙個solt的屬性，屬性值為插槽的名字。在元件內部使用solt標籤進行接收，solt標籤新增乙個name屬性，name的屬性值為solt的屬性值，這樣可以在不同位置進行顯示，加大了插槽的靈活度。

三、作用域插槽

當元件當做標籤使用的時候，如果需要將插槽中的資料需要使用元件內部資料的時候，需要在元件內部的標籤外部新增乙個template的標籤，新增乙個scoped的屬性，值為任意值（porps），用來接收元件內部傳遞過來的值。通過屬性值（props).屬性（元件內部定義屬性）接收。

在這裡說一下封裝乙個元件需要注意的問題：

1，元件的復用性。

2，需要暴露的api。

在這裡舉乙個例子，如何封裝乙個輪播圖，在這裡先考慮的是輪播圖的結構是否一樣，如果結構是定死的，我們就不必使用插槽，直接將輪播圖元件寫死，把輪播圖使用的資料暴露出去，這樣便於資料的更新。如果輪播圖的樣式不一，可以使用插槽來增強輪播圖的靈活度，把樣式暴露出去，資料寫在輪播圖元件裡。