正常情況下,<Child><span style=”color:red;”>hello world</span></Child>在組件標(biāo)簽Child中的span標(biāo)簽會(huì)被組件模板template內(nèi)容替換掉，當(dāng)想讓組件標(biāo)簽Child中內(nèi)容傳遞給組件時(shí)需要使用slot插槽；是“占坑”，在組件模板中占好了位置，當(dāng)使用該組件標(biāo)簽時(shí)候，組件標(biāo)簽里面的內(nèi)容就會(huì)自動(dòng)填坑（替換組件模板中<slot>位置），當(dāng)插槽也就是坑<slot name= ” mySlot ” >有命名時(shí)，組件標(biāo)簽中使用屬性slot= ” mySlot ” 的元素就會(huì)替換該對(duì)應(yīng)位置內(nèi)容；

組件中有單個(gè)或多個(gè)未命名slot標(biāo)簽時(shí)

<Child><span style=”color:red;”>hello world</span></Child>??

<template>???

?<div>

<slot></slot>

<slot?style=”color:blue;” >這是在slot上添加了樣式</slot>

<slot?name=”mySlot”>這是擁有命名的slot的默認(rèn)內(nèi)容</slot>

</div>

</template>

使用時(shí)候子組件標(biāo)簽<Child>中要有<template slot-scope=”scopeName”>標(biāo)簽，再通過scopeName.childProp就可以調(diào)用子組件模板中的childProp綁定的數(shù)據(jù)，所以作用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中無法訪問child數(shù)據(jù)的去問題；