vue 里面的slot屬性

參考:https://blog.csdn.net/weixin_41646716/article/details/80450873

 

寫在前面

VUE中關於插槽的文檔說明很短，語言又寫的很凝練，再加上其和方法，數據，計算機等常用選項在使用頻率，使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎組件了”的想法，於是就關閉了VUE的說明文檔。

實際上，插槽的概念很簡單，下面通過分三部分來講，這三部分也是按照VUE說明文檔的順序來寫的。

進入這三部分之前，先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念：插槽，也就是槽，是組件的一塊HTML模板，這塊模板顯示不顯示，以及怎樣顯示由父組件來決定。  實際上，一個時隙最核心的兩個問題在這里就點出來了，的英文顯示不顯示狀語從句：怎樣顯示。

由於插槽是一塊模板，所以，對於任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。非插槽模板指的是html模板，比如'DIV，跨度，UL，表'這些，非插槽模板的顯示與隱藏以及怎樣顯示由組件自身控制;插槽模板是狹槽，它是一個空殼子，因為它的顯示與隱藏以及最后用什么樣的HTML模板顯示由父組件控制。但是插槽顯示的位置卻由子組件自身決定，槽寫在組件模板的什么位置，父組件傳過來的模板將來就顯示在什么位置。

單個插槽| 默認插槽| 匿名插槽

首先是單個插槽，單個插槽的英文VUE的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設置名稱屬性。

單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（名稱屬性）不同就可以了。

下面通過一個例子來展示。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <child>
5.  
   <div class= "tmpl">
6.  
   <span>菜單1</span>
7.  
   <span>菜單2</span>
8.  
   <span>菜單3</span>
9.  
   <span>菜單4</span>
10.  
    <span>菜單5</span>
11.  
    <span>菜單6</span>
12.  
    </div>
13.  
    </child>
14.  
    </div>
15.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
   <h3>這里是子組件</h3>
4.  
   <slot></slot>
5.  
   </div>
6.  
   </template>

在這個例子里，因為父組件在里面寫了HTML模板，子那么組件的匿名來自插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

1.  
   <div class= "tmpl">
2.  
   <span>菜單1</span>
3.  
   <span>菜單2</span>
4.  
   <span>菜單3</span>
5.  
   <span>菜單4</span>
6.  
   <span>菜單5</span>
7.  
   <span>菜單6</span>
8.  
   </div>

最終的渲染結果如圖所示：

 

1.  
    
2.  
   注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。

具名插槽

匿名插槽沒有名稱屬性，所以是匿名插槽，那么，插槽加了名稱屬性，就變成了具名插槽。具名插槽可以在一個組件中出現Ñ次，出現在不同的位置。下面的例子，一個就是有兩個具名插槽狀語從句：單個插槽的組件，這三個插槽被父組件用同一套的CSS樣式顯示了出來，不同的是內容上略有區別。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <child>
5.  
   <div class= "tmpl" slot= "up">
6.  
   <span>菜單1</span>
7.  
   <span>菜單2</span>
8.  
   <span>菜單3</span>
9.  
   <span>菜單4</span>
10.  
    <span>菜單5</span>
11.  
    <span>菜單6</span>
12.  
    </div>
13.  
    <div class= "tmpl" slot= "down">
14.  
    <span>菜單-1</span>
15.  
    <span>菜單-2</span>
16.  
    <span>菜單-3</span>
17.  
    <span>菜單-4</span>
18.  
    <span>菜單-5</span>
19.  
    <span>菜單-6</span>
20.  
    </div>
21.  
    <div class= "tmpl">
22.  
    <span>菜單->1</span>
23.  
    <span>菜單->2</span>
24.  
    <span>菜單->3</span>
25.  
    <span>菜單->4</span>
26.  
    <span>菜單->5</span>
27.  
    <span>菜單->6</span>
28.  
    </div>
29.  
    </child>
30.  
    </div>
31.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
   // 具名插槽
4.  
   <slot name= "up"></slot>
5.  
   <h3>這里是子組件</h3>
6.  
   // 具名插槽
7.  
   <slot name= "down"></slot>
8.  
   // 匿名插槽
9.  
   <slot></slot>
10.  
    </div>
11.  
    </template>

顯示結果如圖：

 

可以看到，父組件通過HTML模板上的槽屬性關聯具名插槽。沒有槽屬性的HTML模板默認關聯匿名插槽。

作用域插槽| 帶數據的插槽

最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數據的插槽。什么意思呢，就是前面兩種，都是在組件的模板里面寫

1.  
   匿名插槽
2.  
   <slot></slot>
3.  
   具名插槽
4.  
   <slot name= "up"></slot>

但是作用域插槽要求，在槽上面綁定數據。也就是你得寫成大概下面這個樣子。

1.  
   <slot name= "up" :data= "data"></slot>
2.  
   export default {
3.  
   data: function(){
4.  
   return {
5.  
   data: [ 'zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
6.  
   }
7.  
   },
8.  
   }

我們前面說了，插槽最后顯示不顯示是看父組件有沒有在孩子下面寫模板，像下面那樣。

1.  
   <child>
2.  
   html模板
3.  
   </child>

寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的HTML + CSS共同決定，但是這套樣式里面的內容呢？

正因為作用域插槽綁定了一套數據，父組件可以拿來用於是，情況就變成了這樣：樣式父組件說了算，但內容可以顯示子組件插槽綁定的。

我們再來對比，作用域插槽跟單個插槽和具名插槽的區別，因為單個插槽和具名插槽不綁定數據，所以父組件提供的模板一般要既包括樣式又包括內容，上面的例子中，你看到的文字“菜單1”，“菜單2”都是父組件自己提供的內容;而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數據的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式（分別是柔性，UL，直接顯示），都沒有提供數據，數據使用的都是子組件插槽自己綁定的那個數組（一堆人名的那個數組）。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <!--第一次使用：用flex展示數據-->
5.  
   <child>
6.  
   <template slot-scope= "user">
7.  
   <div class= "tmpl">
8.  
   <span v-for= "item in user.data">{{item}}</span>
9.  
   </div>
10.  
    </template>
11.  
     
12.  
    </child>
13.  
     
14.  
    <!--第二次使用：用列表展示數據-->
15.  
    <child>
16.  
    <template slot-scope= "user">
17.  
    <ul>
18.  
    <li v-for= "item in user.data">{{item}}</li>
19.  
    </ul>
20.  
    </template>
21.  
     
22.  
    </child>
23.  
     
24.  
    <!--第三次使用：直接顯示數據-->
25.  
    <child>
26.  
    <template slot-scope= "user">
27.  
    {{user.data}}
28.  
    </template>
29.  
     
30.  
    </child>
31.  
     
32.  
    <!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
33.  
    <child>
34.  
    我就是模板
35.  
    </child>
36.  
    </div>
37.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
    
4.  
   <h3>這里是子組件</h3>
5.  
   // 作用域插槽
6.  
   <slot :data= "data"></slot>
7.  
   </div>
8.  
   </template>
9.  
    
10.  
    export default {
11.  
    data: function(){
12.  
    return {
13.  
    data: [ 'zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
14.  
    }
15.  
    }
16.  
    }

結果如圖所示：

 

深入理解VUE中的槽與槽范圍

作者/雲荒杯傾

寫在前面

VUE中關於插槽的文檔說明很短，語言又寫的很凝練，再加上其和方法，數據，計算機等常用選項在使用頻率，使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎組件了”的想法，於是就關閉了VUE的說明文檔。

實際上，插槽的概念很簡單，下面通過分三部分來講，這三部分也是按照VUE說明文檔的順序來寫的。

進入這三部分之前，先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念：插槽，也就是槽，是組件的一塊HTML模板，這塊模板顯示不顯示，以及怎樣顯示由父組件來決定。 實際上，一個時隙最核心的兩個問題在這里就點出來了，英文的顯示不顯示狀語從句：怎樣顯示。

由於插槽是一塊模板，所以，對於任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。非插槽模板指的是html模板，比如'DIV，跨度，UL，表'這些，非插槽模板的顯示與隱藏以及怎樣顯示由組件自身控制;插槽模板是狹槽，它是一個空殼子，因為它的顯示與隱藏以及最后用什么樣的HTML模板顯示由父組件控制。但是插槽顯示的位置卻由子組件自身決定，槽寫在組件模板的什么位置，父組件傳過來的模板將來就顯示在什么位置。

單個插槽| 默認插槽| 匿名插槽

首先是單個插槽，單個插槽的英文VUE的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設置名稱屬性。

單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（名稱屬性）不同就可以了。

下面通過一個例子來展示。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <child>
5.  
   <div class= "tmpl">
6.  
   <span>菜單1</span>
7.  
   <span>菜單2</span>
8.  
   <span>菜單3</span>
9.  
   <span>菜單4</span>
10.  
    <span>菜單5</span>
11.  
    <span>菜單6</span>
12.  
    </div>
13.  
    </child>
14.  
    </div>
15.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
   <h3>這里是子組件</h3>
4.  
   <slot></slot>
5.  
   </div>
6.  
   </template>

在這個例子里，因為父組件在里面寫了HTML模板，子那么組件的匿名來自插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

1.  
   <div class= "tmpl">
2.  
   <span>菜單1</span>
3.  
   <span>菜單2</span>
4.  
   <span>菜單3</span>
5.  
   <span>菜單4</span>
6.  
   <span>菜單5</span>
7.  
   <span>菜單6</span>
8.  
   </div>

最終的渲染結果如圖所示：

 

1.  
    
2.  
   注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。

具名插槽

匿名插槽沒有名稱屬性，所以是匿名插槽，那么，插槽加了名稱屬性，就變成了具名插槽。具名插槽可以在一個組件中出現Ñ次，出現在不同的位置。下面的例子，一個就是有兩個具名插槽狀語從句：單個插槽的組件，這三個插槽被父組件用同一套的CSS樣式顯示了出來，不同的是內容上略有區別。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <child>
5.  
   <div class= "tmpl" slot= "up">
6.  
   <span>菜單1</span>
7.  
   <span>菜單2</span>
8.  
   <span>菜單3</span>
9.  
   <span>菜單4</span>
10.  
    <span>菜單5</span>
11.  
    <span>菜單6</span>
12.  
    </div>
13.  
    <div class= "tmpl" slot= "down">
14.  
    <span>菜單-1</span>
15.  
    <span>菜單-2</span>
16.  
    <span>菜單-3</span>
17.  
    <span>菜單-4</span>
18.  
    <span>菜單-5</span>
19.  
    <span>菜單-6</span>
20.  
    </div>
21.  
    <div class= "tmpl">
22.  
    <span>菜單->1</span>
23.  
    <span>菜單->2</span>
24.  
    <span>菜單->3</span>
25.  
    <span>菜單->4</span>
26.  
    <span>菜單->5</span>
27.  
    <span>菜單->6</span>
28.  
    </div>
29.  
    </child>
30.  
    </div>
31.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
   // 具名插槽
4.  
   <slot name= "up"></slot>
5.  
   <h3>這里是子組件</h3>
6.  
   // 具名插槽
7.  
   <slot name= "down"></slot>
8.  
   // 匿名插槽
9.  
   <slot></slot>
10.  
    </div>
11.  
    </template>

顯示結果如圖：

 

可以看到，父組件通過HTML模板上的槽屬性關聯具名插槽。沒有槽屬性的HTML模板默認關聯匿名插槽。

作用域插槽| 帶數據的插槽

最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數據的插槽。什么意思呢，就是前面兩種，都是在組件的模板里面寫

1.  
   匿名插槽
2.  
   <slot></slot>
3.  
   具名插槽
4.  
   <slot name= "up"></slot>

但是作用域插槽要求，在槽上面綁定數據。也就是你得寫成大概下面這個樣子。

1.  
   <slot name= "up" :data= "data"></slot>
2.  
   export default {
3.  
   data: function(){
4.  
   return {
5.  
   data: [ 'zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
6.  
   }
7.  
   },
8.  
   }

我們前面說了，插槽最后顯示不顯示是看父組件有沒有在孩子下面寫模板，像下面那樣。

1.  
   <child>
2.  
   html模板
3.  
   </child>

寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的HTML + CSS共同決定，但是這套樣式里面的內容呢？

正因為作用域插槽綁定了一套數據，父組件可以拿來用於是，情況就變成了這樣：樣式父組件說了算，但內容可以顯示子組件插槽綁定的。

我們再來對比，作用域插槽跟單個插槽和具名插槽的區別，因為單個插槽和具名插槽不綁定數據，所以父組件提供的模板一般要既包括樣式又包括內容，上面的例子中，你看到的文字“菜單1”，“菜單2”都是父組件自己提供的內容;而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數據的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式（分別是柔性，UL，直接顯示），都沒有提供數據，數據使用的都是子組件插槽自己綁定的那個數組（一堆人名的那個數組）。

父組件：

1.  
   <template>
2.  
   <div class= "father">
3.  
   <h3>這里是父組件</h3>
4.  
   <!--第一次使用：用flex展示數據-->
5.  
   <child>
6.  
   <template slot-scope= "user">
7.  
   <div class= "tmpl">
8.  
   <span v-for= "item in user.data">{{item}}</span>
9.  
   </div>
10.  
    </template>
11.  
     
12.  
    </child>
13.  
     
14.  
    <!--第二次使用：用列表展示數據-->
15.  
    <child>
16.  
    <template slot-scope= "user">
17.  
    <ul>
18.  
    <li v-for= "item in user.data">{{item}}</li>
19.  
    </ul>
20.  
    </template>
21.  
     
22.  
    </child>
23.  
     
24.  
    <!--第三次使用：直接顯示數據-->
25.  
    <child>
26.  
    <template slot-scope= "user">
27.  
    {{user.data}}
28.  
    </template>
29.  
     
30.  
    </child>
31.  
     
32.  
    <!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
33.  
    <child>
34.  
    我就是模板
35.  
    </child>
36.  
    </div>
37.  
    </template>

子組件：

1.  
   <template>
2.  
   <div class= "child">
3.  
    
4.  
   <h3>這里是子組件</h3>
5.  
   // 作用域插槽
6.  
   <slot :data= "data"></slot>
7.  
   </div>
8.  
   </template>
9.  
    
10.  
    export default {
11.  
    data: function(){
12.  
    return {
13.  
    data: [ 'zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
14.  
    }
15.  
    }
16.  
    }

結果如圖所示：

 

方法二：

對內容分發<插槽>的理解可以是占位符，標簽替換，插槽

父組件中屬性放入帶有狹槽的內容，然后這些內容就會被分發到子組件中特殊的slot元素，根據name屬性在子組件中重新組合，替換。