vue的官方文件中介紹插槽是說：slot是一套內容分發的api。那我們怎麼理解solt呢？
插槽可以讓使用者去擴充套件元件，增強了元件的擴充套件性，使得組建的復用更加強大。
在元件化開發中，我們說，通常會把一段復用的**單獨寫成乙個元件，但是有時僅僅是這樣不能滿足需求，這時候可以用到插槽。通過父元件向子元件分發內容。插槽可以讓呼叫者（父元件）實現結構和樣式的自定義。
3.1、匿名插槽
子元件：
>
class
="test"
>
>
>
預設內容(官方文件叫做後備內容)span
>
slot
>
div>
template
>
>
export
default
script
>
>
class
="hello"
>
>
插槽h1
>
>
>
匿名插槽 | 預設插槽 p
>
child
>
div>
template
>
>
import child from
'./child'
export
default};
script
>
具名插槽顧名思義就是擁有名字（name屬性）的solt，name對應父元件的v-slot指令進行分發。
通過v-solt指令將不同的插槽內容分發到不同name的插槽
子元件：
>
class
="test"
>
name
='slot1'
>
>
預設內容(官方文件叫做後備內容)span
>
slot
>
name
='slot2'
>
slot
>
div>
template
>
>
export
default
script
>
>
class
="hello"
>
>
插槽h1
>
>
v-slot:slot1
>
>
我是slot 1111p
>
template
>
v-slot:slot2
>
>
我是slot 2222p
>
template
>
child
>
div>
template
>
>
import child from
'./child'
export
default};
script
>
什麼時作用域插槽？通俗的講，在插槽裡，插槽的內容和樣式都是通過父元件去控制的，就是說，子元件控制不了插槽的樣式和內容。但是，我們想插槽的內容顯示的子元件的內容，那要怎麼做呢？
這就需要作用域插槽，者其實就是插槽的乙個props，子元件可以將資料傳送到父元件的插槽，同屬性的方式。
子元件：
>
class
="test"
>
name
='slot1'
:myslot
='slotcontent'
>
>
預設內容(官方文件叫做後備內容)span
>
slot
>
name
='slot2'
:myslot
='slotcontent'
>
slot
>
div>
template
>
>
export
default}}
script
>
>
class
="hello"
>
>
插槽h1
>
>
v-slot:slot1
='slotprops'
>
>
}p>
template
>
v-slot:slot2=''
>
>
}p>
template
>
child
>
div>
template
>
>
import child from
'./child'
export
default};
script
>
動態插槽就是v-slot繫結的是乙個可以改變的動態變數
v-slot:[slotname]
>
>
動態插槽p
>
template
>
Vue 使用插槽（slot）
當父元件向子元件傳值的時候，有時候，父元件傳的並不是單純的數值 字串，有可能是帶標籤 dom 的資料，那麼如何傳值呢？如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...
Vue插槽slot使用
子元件 child1 此時插槽區域內顯示文案hello 父元件 hello用途 讓內容顯示到元件內的指定位置 子元件 child1 顯示預設的插槽 會顯示v slot為content的內容 parent 預設插槽使用default做引數 哈哈哈 具名插槽使用插槽名做引數 具名插槽 用途 讓內容成為某...
vue使用插槽slot
vue中使用slot插槽 父元件 插槽的使用 父元件 父元件接受子元件的資料 child slot header 我是頭部 template footer 我是底部 template 你好我是底部元件 div slot use 子元件的內容 slotcontainder 我是子元件 div 子元件的...