Slot

Slot=>內容分發,占位元素

父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。Slot分發的內容，作用域是在父組件上

1.Vue2.6版本前的舊特性用法

1.1不具名slot

父組件內使用子組件

<children><p>我是第一行</p><p>我是第二行</p> </children>

子組件模板內容

<div><p>template div 內容</p> <!-- <slot>slot標簽內的內容</slot>slot外div內的內容 --> </div>

渲染過程： 模板內容直接替換childre中的內容

<div><p>template div p 內容</p> </div>

接上 啟用slot后的渲染結果

<div><p>template div 內容</p><p>我是第一行</p><p>我是第二行</p><!--復制被調用子組件內的內容并替換<slot></slot>自身-->slot外div內的內容<!--該內容按從上到下被渲染--> </div>

渲染過程： 按子組件模板從上至下渲染，先將<p>template div 內容</p>渲染出來，緊接著讀取到slot標簽立即復制被調用子組件內的內容并替換<slot></slot>自身，然后渲染子組件模版內剩余

1.2具名slot

父組件內使用子組件

<children><p>我是第一行</p><p>我是第二行</p><slot>第一個slot</slot><slot>第二個slot</slot><h2 slot="header">頭部在這</h2><p>中間在這</p><div slot="footer"><div>底部在這</div></div> </children>

子組件模板內容

<div><slot></slot><h2 slot="header">h2 slot=header</h2><!--不報錯，應該被認為常規元素，會被渲染到不具名slot區域--><slot name="header"></slot><!--在父組件中搜查匹配 帶有名叫"header"slot的元素并復制替換本處元素--> <slot name="footer"></slot><!--在父組件中搜查匹配 帶有名叫"footer"slot的元素并復制替換本處元素--> </div>

渲染成：

<div><p>我是第一行</p><p>我是第二行</p> 第一個slot 第二個slot <p>中間在這</p><h2 slot="header">h2 slot=header</h2><h2>頭部在這</h2><div><div>底部在這</div></div> </div>

渲染過程：讀取到slot標簽后將被調用的子組件中沒有被具名插槽包裹的內容及子組件模版內的常規內容替換slot標簽所在區域并按順序渲染，讀到具名slot則在被調用的子組件中查找與之name對應的內容復制替換對應的具名插槽并渲染

1.3作用域插槽 slot-scope

2.6之前 ==>slot scope=”別名”
在父組件內使用 slot-scope 并使用傳入的數據
將<span v-for="item in aaa.shuju">{{item}}</span>復制替換子組件的<slot></slot>,并將“shuju”作為receiveData的新屬性(類似這個意思)，此時receiveData.shuju就等同于子組件中返回的data對象

<template slot-scope="receiveData"><div><span v-for="item in receiveData.shuju">{{item}}</span></div> </template>

在子組件內設定傳入的值并在slot上綁定需要傳入的值
子組件內

模板： <div><slot :shuju="data"></slot> </div>

其他：

data:function(){ return{data:['zhangsan','lisi','wangwu','maliu','qianqi','zhouba']}}

最終渲染成：

<div><h3>這里是子組件</h3><div><span>zhangsan</span><span>lisi</span><span>wangwu</span><span>maliu</span><span>qianqi</span><span>zhouba</span></div> </div>

2.Vue2.6版本及以后的新特性用法

2.1 不具名插槽

父組件內使用子組件

<children><template v-slot> <!--此處的v-slot等同于 v-slot:default--><div>template v-slot中的內容</div></template> </children>

子組件模板內

<div><slot></slot> </div>

最終渲染成：

<div><div>template v-slot中的內容</div> </div>

渲染過程基本一致

2.2 具名插槽

2.6新特性 v-slot 只能被用于組件或者模板 上方使用v-slot
父組件內使用子組件

<children><template v-slot:header>hahaha</template><template v-slot:footer>腳在這兒</template><template v-slot:header>頭部在這</template><!--此處會覆蓋上面同名--><p>中間在這</p><template v-slot:footer><!--此處會覆蓋上面同名--><div>底部在這</div></template> </children>

子組件模板內

<div><slot></slot><slot name="header"></slot><slot name="footer"></slot> </div>

最終渲染成：

<div><p>中間在這</p> 頭部在這 <div>底部在這</div> </div>

渲染過程基本一致
注意：多個同名具名插后面的覆蓋前面的，只會有一個起效！

2.3作用域插槽

v-slot
在父組件內使用 v-slot=”xxx” 并傳入的數據

<children><template v-slot:header>hahaha</template><template v-slot:footer>腳在這兒</template><template v-slot:header>頭部在這</template><!--此處會覆蓋上面同名--><p>中間在這</p><template v-slot:footer="receiveData"><!--此處會覆蓋上面同名--><div>底部在這</div><div>{{receiveData.sendData.firstName}}+{{receiveData.sendData.lastName}}</div></template> </children>

子組件模板內

<div><slot></slot><slot name="header"></slot><slot name="footer" :sendData="userInfo"></slot> </div>

最終渲染成：

<div><p>中間在這</p> 頭部在這 <div>底部在這</div><div>Brain+Lu</div> </div>

渲染過程基本一致

3.理解及結論

默認（后備）內容[一般指子組件模板內的<slot>默認（后備）內容</slot>]生效的情況：在父組件內使用的子組件內不包含可渲染內容的情況下會被渲染出來。
渲染順序：在父組中被調用的子組件外的內容有線渲染，然后子組件模板內從上至下渲染。
Slot執行過程：子組件的模板把父組件中的內容(<children>內容</children>)選擇性復制然后替換本身。
Slot-不具名插槽==>子組件模板內各個<slot></slot>都會把父組件中除具名插槽包裹的其他內容復制一份并替換自身(<slot></slot>)位置
Slot-具名插槽==>子組件模板內各個<slot name="xxx"></slot>都會把父組件中的與匹配的具名插槽包裹的其他內容復制一份并替換自身(<slot></slot>)位置再渲染
v-slot寫法同時存在多個同名具名插槽，寫在最后的那個起效
同時存在兩種寫法的情況下 新寫法的渲染優先級更高，不論是否具名都會覆蓋掉就寫法

<template v-slot:footer>template v-slot </template> <p slot="footer">slot=footer</p> <!--此處不會被渲染，不論寫在v-slot之前還是之后-->

目前還未應用于實際場景，聽聞Element的table組件和Button組件似乎有用到slot，暫未探究，有興趣的小伙伴可以去看看；有實際應用也可告訴我。
注：結論等均是感性認知，不一定是正確的，只是方便理解(也許只是自己)

總結

以上是生活随笔為你收集整理的前端学习（2464）：vue中 slot的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。