在Vue中曙咽，插槽slot是可以由組件使用者來(lái)自定義內(nèi)容蛔趴，用來(lái)做組件的擴(kuò)展。
如下例朱，我們封裝了一個(gè)列表組件
<template>
ul
li(v-for="item in list")
span(v-html="item.text")
</template>
<script>
export default{
props:["list"]
}
</script>
默認(rèn)該組件可以讓使用者傳入list孝情，遍歷顯示list中每個(gè)item的text值
但是，當(dāng)使用者洒嗤，不僅僅用來(lái)顯示text值時(shí)箫荡，組件就要求做調(diào)整
如果不同使用者想要呈現(xiàn)的方式各異，我們沒(méi)理由為這不同的呈現(xiàn)做特殊定制
這時(shí)候插槽就派上用場(chǎng)渔隶，將組件改造如下
<template>
ul
li(v-for="item in list")
slot(:item="item")
span(v-html="item.text")
</template>
<script>
export default{
props:["list"]
}
</script>
使用者就可以自定義插槽內(nèi)容羔挡，如list就是我們封裝好的組件
可以顯示內(nèi)容項(xiàng)的名字
<list><tempalte scope="props"><span v-html="props.item.name"></span></template></list>
可以顯示內(nèi)容項(xiàng)的圖片和描述
<list>
<tempalte scope="props">
<div>
<img :src="props.item.img"/>
<span v-html="item.desc"></span>
</div>
</template>
</list>
要注意的是，插槽也會(huì)帶來(lái)一定的問(wèn)題：Vue內(nèi)部檢測(cè)刷新的機(jī)制中间唉，如果組件A中包含了插槽元素绞灼，子節(jié)點(diǎn)之類的，父組件更新的時(shí)候呈野，該組件A會(huì)被強(qiáng)制更新低矮。
如果組件A中render渲染比較耗時(shí)的話，要做多一層封裝被冒；
如下（其中test是我們上面封裝好的組件）
<div id="app">
<input type="text" v-model="name"/>
<test :list="list" @hook:updated="testUpdated"><template scope="props"><span v-html="props.item.name"></span></template></test>
</div>
<script>
new Vue({
el:"#app",
data:{
list:[{name:"123"},{name:"456"},{name:"789"}],
name:"test"
},
methods:{
testUpdated:function(){
console.log("d")
}
}
})
</script>
在這里军掂，每次修改input框值轮蜕，都會(huì)觸發(fā)組件test的更新
