前言：

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

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

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

由于插槽是一塊模板，所以，對于任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。 非插槽模板指的是html模板，比如‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由組件自身控制；插槽模板是slot，它是一個空殼子，因為它的顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置卻由子組件自身決定，slot寫在組件template的什么位置，父組件傳過來的模板將來就顯示在什么位置。

?

一、理解vue中的slot

官網上對slot的理解是：

“Vue實現了一套內容分發的API，這套API基于當前的Web Components規范草案，將slot元素作為承載分發內容的接口”。

??在參考了很多資料之后，以下總結一下我對slot的理解: ??slot的意思是插槽，Vue使用slot的作用是做內容分發。所謂的內容分發其實就是將父組件的內容放到子組件指定的位置叫做內容分發。 ??在我們的電腦主板上也有各種各樣的插槽，有插CPU的，有插顯卡的，有插內存的，有插硬盤的。我們可以理解slot為要占出當前的位置，方便我們插入內容。或者可以這樣理解：要去吃飯了，兒子先去占座，然后等他爸爸來了再一起吃。 ??Vue的插槽分為匿名插槽（單個插槽/默認插槽）、具名插槽、作用域插槽（帶數據的插槽）。 ####匿名插槽（單個插槽/默認插槽）

• 無name屬性
• 在組件中只可以使用一次
• 父組件提供樣式和內容

<!-- 父組件--> <template><div class="father"><h3>這里是父組件</h3><chlid><div class="tmp1"><span>Leaf 1</span><span>Leaf 2</span><span>Leaf 3</span><span>Leaf 4</span><span>Leaf 5</span></div></child></div> </template> <script> import Child from '@/components/child' export default {components:{child:child} } </script> <style> .tmp1 span{width: 50px;height: 50px;border: 1px solid black; } </style> 復制代碼 <!--子組件--> <template><div><slot></slot><h2>child子組件部分</h2></div> </template> 復制代碼

最終呈現效果：

如果改變子組件中的位置：

?

<template><div><h2>child子組件部分</h2><slot></slot></div> </template> 復制代碼

改變slot位置后的最終呈現效果如下：

?

只有在父組件的child下寫了html模板，才能在子組件指定的位置放父組件的內容。插槽最后顯示不顯示是看父組件有沒有在child下寫模板，像下面一樣：

<child>html模板 </child> 復制代碼

####具名插槽

• 有name屬性
• 在組件中可以使用N次
• 父組件通過html模板上的slot屬性關聯具名插槽
• 沒有slot屬性的html模板默認關聯匿名模板
• 父組件提供樣式和內容

<!--父組件--> <template><div class="father"><h3>這里是父組件</h3><chlid><div class="tmp1" slot="up"><span>Leaf 1</span><span>Leaf 2</span><span>Leaf 3</span><span>Leaf 4</span><span>Leaf 5</span></div><div class="tmp1" slot="down"> <span>Leaf 6</span> <span>Leaf 7</span> <span>Leaf 8</span> <span>Leaf 9</span> <span>Leaf 10</span> </div> </child> </div> </template> <script> import Child from '@/components/child' export default { components:{ child:child } } </script> <style> .tmp1 span{ width: 50px; height: 50px; border: 1px solid black; } </style> 復制代碼 <!--子組件--> <template><div><slot name="up"></slot><h2>chlid子組件部分</h2><slot name="down"></slot></div> </template> 復制代碼

最終呈現效果：

####作用域插槽（帶數據的插槽）

?

• 父組件只提供樣式，子組件提供內容
• 在slot上面綁定數據
• 子組件的值可以傳給父組件使用
• 父組件展示子組件數據有3種方式：flex顯示、列表顯示、直接顯示
• 使用slot-scope必須使用template
• scope返回的值是slot標簽上返回的所有屬性值，并且是一個對象的形式保存起來
• slot有兩個屬性，一個row,另一個是index

<!--父組件--> <template><div class="father"><h3>這里是父組件</h3><chlid><!-- 第一次使用：用flex展示數據 --><template slot-scope="user"><div class="tmp1"><span v-for="(item,index) in user.data" :key="index">{{item}}</span> </div> </template> <!-- 第二次使用：用列表展示數據 --> <template slot-scope="user"> <ul> <li v-for="(item,index) in user.data" :key="index">{{item}}</li> </ul> </template> <!-- 第三次使用：直接顯示 --> <template slot-scope="user"> {{user.data}} </template> </child> </div> </template> <script> import Child from '@/components/child' export default { components:{ child:child } } </script> <style> .tmp1 span{ width: 50px; height: 50px; border: 1px solid black; } </style> 復制代碼 <!--子組件--> <template><div><h2>chlid子組件部分</h2><slot :data="data"></slot></div> </template> <script> export default {props: ["message"],data () { return { data: [''小莊','CC','小張','小林','Leaf','Bob'] } } } </script> 復制代碼

通過3種方式顯示數據的最終呈現效果分別如下： 1、flex顯示

2、列表顯示 3、直接顯示

?

這里我們所看到的數據“'小莊','CC','小張','小林','Leaf','Bob'”都是子組件data提供的數據,父組件如果要使用這些數據必須要通過template模板結合slot-scope來呈現。

這里只是將自己學到的知識做一個總結，方便自己記憶和查閱，可能會有錯，望大神指點！

作者：Leaf_hyc
鏈接：https://juejin.im/post/5c83aa1b5188257ddb6af526
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

?

轉載于:https://www.cnblogs.com/ning123/p/11146134.html

總結

以上是生活随笔為你收集整理的Vue 之 slot(插槽）的全部內容，希望文章能夠幫你解決所遇到的問題。

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