前言：

vue中關(guān)于插槽的文檔說(shuō)明很短，語(yǔ)言又寫的很凝練，再加上其和methods，data，computed等常用選項(xiàng)在使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開(kāi)發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫基礎(chǔ)組件了”的想法，于是就關(guān)閉了vue的說(shuō)明文檔。

實(shí)際上，插槽的概念很簡(jiǎn)單，下面通過(guò)分三部分來(lái)講。這三部分也是按照vue說(shuō)明文檔的順序來(lái)寫的。

進(jìn)入這三部分之前，先讓還沒(méi)接觸過(guò)插槽的同學(xué)對(duì)什么是插槽有一個(gè)簡(jiǎn)單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來(lái)決定。 實(shí)際上，一個(gè)slot最核心的兩個(gè)問(wèn)題在這里就點(diǎn)出來(lái)了，是顯示不顯示和怎樣顯示。

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

?

一、理解vue中的slot

官網(wǎng)上對(duì)slot的理解是：

“Vue實(shí)現(xiàn)了一套內(nèi)容分發(fā)的API，這套API基于當(dāng)前的Web Components規(guī)范草案，將slot元素作為承載分發(fā)內(nèi)容的接口”。

??在參考了很多資料之后，以下總結(jié)一下我對(duì)slot的理解: ??slot的意思是插槽，Vue使用slot的作用是做內(nèi)容分發(fā)。所謂的內(nèi)容分發(fā)其實(shí)就是將父組件的內(nèi)容放到子組件指定的位置叫做內(nèi)容分發(fā)。 ??在我們的電腦主板上也有各種各樣的插槽，有插CPU的，有插顯卡的，有插內(nèi)存的，有插硬盤的。我們可以理解slot為要占出當(dāng)前的位置，方便我們插入內(nèi)容?；蛘呖梢赃@樣理解：要去吃飯了，兒子先去占座，然后等他爸爸來(lái)了再一起吃。 ??Vue的插槽分為匿名插槽（單個(gè)插槽/默認(rèn)插槽）、具名插槽、作用域插槽（帶數(shù)據(jù)的插槽）。 ####匿名插槽（單個(gè)插槽/默認(rèn)插槽）

• 無(wú)name屬性
• 在組件中只可以使用一次
• 父組件提供樣式和內(nèi)容

<!-- 父組件--> <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> 復(fù)制代碼 <!--子組件--> <template><div><slot></slot><h2>child子組件部分</h2></div> </template> 復(fù)制代碼

最終呈現(xiàn)效果：

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

?

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

改變slot位置后的最終呈現(xiàn)效果如下：

?

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

<child>html模板 </child> 復(fù)制代碼

####具名插槽

• 有name屬性
• 在組件中可以使用N次
• 父組件通過(guò)html模板上的slot屬性關(guān)聯(lián)具名插槽
• 沒(méi)有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名模板
• 父組件提供樣式和內(nèi)容

<!--父組件--> <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> 復(fù)制代碼 <!--子組件--> <template><div><slot name="up"></slot><h2>chlid子組件部分</h2><slot name="down"></slot></div> </template> 復(fù)制代碼

最終呈現(xiàn)效果：

####作用域插槽（帶數(shù)據(jù)的插槽）

?

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

<!--父組件--> <template><div class="father"><h3>這里是父組件</h3><chlid><!-- 第一次使用：用flex展示數(shù)據(jù) --><template slot-scope="user"><div class="tmp1"><span v-for="(item,index) in user.data" :key="index">{{item}}</span> </div> </template> <!-- 第二次使用：用列表展示數(shù)據(jù) --> <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> 復(fù)制代碼 <!--子組件--> <template><div><h2>chlid子組件部分</h2><slot :data="data"></slot></div> </template> <script> export default {props: ["message"],data () { return { data: [''小莊','CC','小張','小林','Leaf','Bob'] } } } </script> 復(fù)制代碼

通過(guò)3種方式顯示數(shù)據(jù)的最終呈現(xiàn)效果分別如下： 1、flex顯示

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

?

這里我們所看到的數(shù)據(jù)“'小莊','CC','小張','小林','Leaf','Bob'”都是子組件data提供的數(shù)據(jù),父組件如果要使用這些數(shù)據(jù)必須要通過(guò)template模板結(jié)合slot-scope來(lái)呈現(xiàn)。

這里只是將自己學(xué)到的知識(shí)做一個(gè)總結(jié)，方便自己記憶和查閱，可能會(huì)有錯(cuò)，望大神指點(diǎn)！

作者：Leaf_hyc
鏈接：https://juejin.im/post/5c83aa1b5188257ddb6af526
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

?

轉(zhuǎn)載于:https://www.cnblogs.com/ning123/p/11146134.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。