總結如下：
深入了解VUE中的槽與槽範圍
寫在前面
VUE中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和方法，資料，計算機等常用選項在使用頻率，使用先後上的差别，這就有可能造成初次接觸插槽的開發者容易産生“算了吧，回頭再學，反正已經可以寫基礎元件了”的想法，于是就關閉了VUE的說明文檔。
實際上，插槽的概念很簡單，下面通過分三部分來講，這三部分也是按照VUE說明文檔的順序來寫的。
進入這三部分之前，先讓還沒接觸過插槽的同學對什麼是插槽有一個簡單的概念：插槽，也就是槽，是元件的一塊HTML模闆，這塊模闆顯示不顯示，以及怎樣顯示由父元件來決定。 實際上，一個時隙最核心的兩個問題在這裡就點出來了，的英文顯示不顯示狀語從句：怎樣顯示。
由于插槽是一塊模闆，是以，對于任何一個元件，從模闆種類的角度來分，其實都可以分為非插槽模闆和插槽模闆兩大類。非插槽模闆指的是html模闆，比如'DIV，跨度，UL，表'這些，非插槽模闆的顯示與隐藏以及怎樣顯示由元件自身控制;插槽模闆是狹槽，它是一個空殼子，因為它的顯示與隐藏以及最後用什麼樣的HTML模闆顯示由父元件控制。但是插槽顯示的位置卻由子元件自身決定，槽寫在元件模闆的什麼位置，父元件傳過來的模闆将來就顯示在什麼位置。
單個插槽| 預設插槽| 匿名插槽
首先是單個插槽，單個插槽的英文VUE的官方叫法，但是其實也可以叫它預設插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設定名稱屬性。
單個插槽可以放置在元件的任意位置，但是就像它的名字一樣，一個元件中隻能有一個該類插槽。相對應的，具名插槽就可以有很多個，隻要名字（名稱屬性）不同就可以了。
下面通過一個例子來展示。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
<slot></slot>
</div>
</template>
在這個例子裡，因為父元件在裡面寫了HTML模闆，子那麼元件的匿名來自插槽這塊模闆就是下面這樣。也就是說，子元件的匿名插槽被使用了，是被下面這塊模闆使用了。
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
最終的渲染結果如圖所示：
注：所有demo都加了樣式，以友善觀察。其中，父元件以灰色背景填充，子元件都以淺藍色填充。
具名插槽
匿名插槽沒有名稱屬性，是以是匿名插槽，那麼，插槽加了名稱屬性，就變成了具名插槽。具名插槽可以在一個元件中出現Ñ次，出現在不同的位置。下面的例子，一個就是有兩個具名插槽狀語從句：單個插槽的元件，這三個插槽被父元件用同一套的CSS樣式顯示了出來，不同的是内容上略有差別。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
<div class="tmpl" slot="down">
<span>菜單-1</span>
<span>菜單-2</span>
<span>菜單-3</span>
<span>菜單-4</span>
<span>菜單-5</span>
<span>菜單-6</span>
</div>
<div class="tmpl">
<span>菜單->1</span>
<span>菜單->2</span>
<span>菜單->3</span>
<span>菜單->4</span>
<span>菜單->5</span>
<span>菜單->6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>這裡是子元件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
顯示結果如圖：
可以看到，父元件通過HTML模闆上的槽屬性關聯具名插槽。沒有槽屬性的HTML模闆預設關聯匿名插槽。
作用域插槽| 帶資料的插槽
最後，就是我們的作用域插槽。這個稍微難了解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶資料的插槽。什麼意思呢，就是前面兩種，都是在元件的模闆裡面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求，在槽上面綁定資料。也就是你得寫成大概下面這個樣子。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我們前面說了，插槽最後顯示不顯示是看父元件有沒有在孩子下面寫模闆，像下面那樣。
<child>
html模闆
</child>
寫了，插槽就總得在浏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。OK，我們說有html模闆的情況，就是父元件會往子元件插模闆的情況，那到底插一套什麼樣的樣式呢，這由父元件的HTML + CSS共同決定，但是這套樣式裡面的内容呢？
正因為作用域插槽綁定了一套資料，父元件可以拿來用于是，情況就變成了這樣：樣式父元件說了算，但内容可以顯示子元件插槽綁定的。
我們再來對比，作用域插槽跟單個插槽和具名插槽的差別，因為單個插槽和具名插槽不綁定資料，是以父元件提供的模闆一般要既包括樣式又包括内容，上面的例子中，你看到的文字“菜單1”，“菜單2”都是父元件自己提供的内容;而作用域插槽，父元件隻需要提供一套樣式（在确實用作用域插槽綁定的資料的前提下）。
下面的例子，你就能看到，父元件提供了三種樣式（分别是柔性，UL，直接顯示），都沒有提供資料，資料使用的都是子元件插槽自己綁定的那個數組（一堆人名的那個數組）。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<!--第一次使用：用flex展示資料-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用清單展示資料-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接顯示資料-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的資料, 作用域插槽退變成匿名插槽-->
<child>
我就是模闆
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
結果如圖所示：
深入了解VUE中的槽與槽範圍
作者/雲荒杯傾
寫在前面
VUE中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和方法，資料，計算機等常用選項在使用頻率，使用先後上的差别，這就有可能造成初次接觸插槽的開發者容易産生“算了吧，回頭再學，反正已經可以寫基礎元件了”的想法，于是就關閉了VUE的說明文檔。
實際上，插槽的概念很簡單，下面通過分三部分來講，這三部分也是按照VUE說明文檔的順序來寫的。
進入這三部分之前，先讓還沒接觸過插槽的同學對什麼是插槽有一個簡單的概念：插槽，也就是槽，是元件的一塊HTML模闆，這塊模闆顯示不顯示，以及怎樣顯示由父元件來決定。 實際上，一個時隙最核心的兩個問題在這裡就點出來了，英文的顯示不顯示狀語從句：怎樣顯示。
由于插槽是一塊模闆，是以，對于任何一個元件，從模闆種類的角度來分，其實都可以分為非插槽模闆和插槽模闆兩大類。非插槽模闆指的是html模闆，比如'DIV，跨度，UL，表'這些，非插槽模闆的顯示與隐藏以及怎樣顯示由元件自身控制;插槽模闆是狹槽，它是一個空殼子，因為它的顯示與隐藏以及最後用什麼樣的HTML模闆顯示由父元件控制。但是插槽顯示的位置卻由子元件自身決定，槽寫在元件模闆的什麼位置，父元件傳過來的模闆将來就顯示在什麼位置。
單個插槽| 預設插槽| 匿名插槽
首先是單個插槽，單個插槽的英文VUE的官方叫法，但是其實也可以叫它預設插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設定名稱屬性。
單個插槽可以放置在元件的任意位置，但是就像它的名字一樣，一個元件中隻能有一個該類插槽。相對應的，具名插槽就可以有很多個，隻要名字（名稱屬性）不同就可以了。
下面通過一個例子來展示。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
<slot></slot>
</div>
</template>
在這個例子裡，因為父元件在裡面寫了HTML模闆，子那麼元件的匿名來自插槽這塊模闆就是下面這樣。也就是說，子元件的匿名插槽被使用了，是被下面這塊模闆使用了。
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
最終的渲染結果如圖所示：
注：所有demo都加了樣式，以友善觀察。其中，父元件以灰色背景填充，子元件都以淺藍色填充。
具名插槽
匿名插槽沒有名稱屬性，是以是匿名插槽，那麼，插槽加了名稱屬性，就變成了具名插槽。具名插槽可以在一個元件中出現Ñ次，出現在不同的位置。下面的例子，一個就是有兩個具名插槽狀語從句：單個插槽的元件，這三個插槽被父元件用同一套的CSS樣式顯示了出來，不同的是内容上略有差別。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
<div class="tmpl" slot="down">
<span>菜單-1</span>
<span>菜單-2</span>
<span>菜單-3</span>
<span>菜單-4</span>
<span>菜單-5</span>
<span>菜單-6</span>
</div>
<div class="tmpl">
<span>菜單->1</span>
<span>菜單->2</span>
<span>菜單->3</span>
<span>菜單->4</span>
<span>菜單->5</span>
<span>菜單->6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>這裡是子元件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
顯示結果如圖：
可以看到，父元件通過HTML模闆上的槽屬性關聯具名插槽。沒有槽屬性的HTML模闆預設關聯匿名插槽。
作用域插槽| 帶資料的插槽
最後，就是我們的作用域插槽。這個稍微難了解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶資料的插槽。什麼意思呢，就是前面兩種，都是在元件的模闆裡面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求，在槽上面綁定資料。也就是你得寫成大概下面這個樣子。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我們前面說了，插槽最後顯示不顯示是看父元件有沒有在孩子下面寫模闆，像下面那樣。
<child>
html模闆
</child>
寫了，插槽就總得在浏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。OK，我們說有html模闆的情況，就是父元件會往子元件插模闆的情況，那到底插一套什麼樣的樣式呢，這由父元件的HTML + CSS共同決定，但是這套樣式裡面的内容呢？
正因為作用域插槽綁定了一套資料，父元件可以拿來用于是，情況就變成了這樣：樣式父元件說了算，但内容可以顯示子元件插槽綁定的。
我們再來對比，作用域插槽跟單個插槽和具名插槽的差別，因為單個插槽和具名插槽不綁定資料，是以父元件提供的模闆一般要既包括樣式又包括内容，上面的例子中，你看到的文字“菜單1”，“菜單2”都是父元件自己提供的内容;而作用域插槽，父元件隻需要提供一套樣式（在确實用作用域插槽綁定的資料的前提下）。
下面的例子，你就能看到，父元件提供了三種樣式（分别是柔性，UL，直接顯示），都沒有提供資料，資料使用的都是子元件插槽自己綁定的那個數組（一堆人名的那個數組）。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<!--第一次使用：用flex展示資料-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用清單展示資料-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接顯示資料-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的資料, 作用域插槽退變成匿名插槽-->
<child>
我就是模闆
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
結果如圖所示：
方法二：
對内容分發<插槽>的了解可以是占位符，标簽替換，插槽
父元件中屬性放入帶有狹槽的内容，然後這些内容就會被分發到子元件中特殊的slot元素，根據name屬性在子元件中重新組合，替換。
深入了解VUE中的槽與槽範圍
作者/雲荒杯傾
寫在前面
VUE中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和方法，資料，計算機等常用選項在使用頻率，使用先後上的差别，這就有可能造成初次接觸插槽的開發者容易産生“算了吧，回頭再學，反正已經可以寫基礎元件了”的想法，于是就關閉了VUE的說明文檔。
實際上，插槽的概念很簡單，下面通過分三部分來講，這三部分也是按照VUE說明文檔的順序來寫的。
進入這三部分之前，先讓還沒接觸過插槽的同學對什麼是插槽有一個簡單的概念：插槽，也就是槽，是元件的一塊HTML模闆，這塊模闆顯示不顯示，以及怎樣顯示由父元件來決定。 實際上，一個時隙最核心的兩個問題在這裡就點出來了，的英文顯示不顯示狀語從句：怎樣顯示。
由于插槽是一塊模闆，是以，對于任何一個元件，從模闆種類的角度來分，其實都可以分為非插槽模闆和插槽模闆兩大類。 非插槽模闆指的是html模闆，比如‘div、span、ul、table’這些，非插槽模闆的顯示與隐藏以及怎樣顯示由元件自身控制；插槽模闆是slot，它是一個空殼子，因為它的顯示與隐藏以及最後用什麼樣的html模闆顯示由父元件控制。但是插槽顯示的位置卻由子元件自身決定，slot寫在元件template的什麼位置，父元件傳過來的模闆将來就顯示在什麼位置。
單個插槽 | 預設插槽 | 匿名插槽
首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它預設插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設定name屬性。
單個插槽可以放置在元件的任意位置，但是就像它的名字一樣，一個元件中隻能有一個該類插槽。相對應的，具名插槽就可以有很多個，隻要名字（name屬性）不同就可以了。
下面通過一個例子來展示。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
<slot></slot>
</div>
</template>
在這個例子裡，因為父元件在裡面寫了html模闆，那麼子元件的匿名插槽這塊模闆就是下面這樣。也就是說，子元件的匿名插槽被使用了，是被下面這塊模闆使用了。
<div class="tmpl">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
最終的渲染結果如圖所示：
注：所有demo都加了樣式，以友善觀察。其中，父元件以灰色背景填充，子元件都以淺藍色填充。
具名插槽
匿名插槽沒有name屬性，是以是匿名插槽，那麼，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個元件中出現N次，出現在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的元件，這三個插槽被父元件用同一套css樣式顯示了出來，不同的是内容上略有差別。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
</div>
<div class="tmpl" slot="down">
<span>菜單-1</span>
<span>菜單-2</span>
<span>菜單-3</span>
<span>菜單-4</span>
<span>菜單-5</span>
<span>菜單-6</span>
</div>
<div class="tmpl">
<span>菜單->1</span>
<span>菜單->2</span>
<span>菜單->3</span>
<span>菜單->4</span>
<span>菜單->5</span>
<span>菜單->6</span>
</div>
</child>
</div>
</template>
子元件：
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>這裡是子元件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
顯示結果如圖：
可以看到，父元件通過html模闆上的slot屬性關聯具名插槽。沒有slot屬性的html模闆預設關聯匿名插槽。
作用域插槽 | 帶資料的插槽
最後，就是我們的作用域插槽。這個稍微難了解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶資料的插槽。什麼意思呢，就是前面兩種，都是在元件的template裡面寫
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
但是作用域插槽要求，在slot上面綁定資料。也就是你得寫成大概下面這個樣子。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
我們前面說了，插槽最後顯示不顯示是看父元件有沒有在child下面寫模闆，像下面那樣。
<child>
html模闆
</child>
寫了，插槽就總得在浏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。 OK，我們說有html模闆的情況，就是父元件會往子元件插模闆的情況，那到底插一套什麼樣的樣式呢，這由父元件的html+css共同決定，但是這套樣式裡面的内容呢？
正因為作用域插槽綁定了一套資料，父元件可以拿來用。于是，情況就變成了這樣：樣式父元件說了算，但内容可以顯示子元件插槽綁定的。
我們再來對比，作用域插槽跟單個插槽和具名插槽的差別，因為單個插槽和具名插槽不綁定資料，是以父元件提供的模闆一般要既包括樣式又包括内容，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父元件自己提供的内容；而作用域插槽，父元件隻需要提供一套樣式（在确實用作用域插槽綁定的資料的前提下）。
下面的例子，你就能看到，父元件提供了三種樣式(分别是flex、ul、直接顯示)，都沒有提供資料，資料使用的都是子元件插槽自己綁定的那個數組（一堆人名的那個數組）。
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<!--第一次使用：用flex展示資料-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用清單展示資料-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接顯示資料-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的資料, 作用域插槽退變成匿名插槽-->
<child>
我就是模闆
</child>
</div>
</template>
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
結果如圖所示：