理解
Vue組件化中降狠，當(dāng)我們?cè)谠O(shè)計(jì)一個(gè)組件的時(shí)候对竣，可能會(huì)保留一部分，讓使用者自定義的內(nèi)容榜配，比如：
- 導(dǎo)航欄組件中否纬，右上角的分享按鈕，左上角做菜單按鈕
- 彈出框組件中蛋褥，彈出框的提示內(nèi)容等
- ...
在這種場(chǎng)景下临燃，把保留給使用者的部分，叫做插槽(slot)
插槽分類
匿名插槽
理解：
- 所謂匿名插槽烙心，就是這個(gè)插槽里膜廊，沒有聲明任何名稱，使用者放進(jìn)來的東西淫茵，都扔進(jìn)這個(gè)插槽中爪瓜。
- 匿名插槽是一種特殊的具名插槽，也就是名為
default的插槽
寫法：
//自定義組件中
<template>
<div>
<slot><slot>//匿名插槽
</div>
</template>
//頁面(使用者)使用
<template>
<div>
<myComponent><p>我被放進(jìn)了插槽中</p></myComponent>
</div>
</template>
代碼中我被放進(jìn)了插槽中這句話匙瘪，就進(jìn)入了自定義組件的匿名插槽中铆铆，從而變成了
//自定義組件中
<template>
<div>
<div>
<p>我被放進(jìn)了插槽中</p><!-- 匿名插槽中放入了內(nèi)容 -->
</div>
</div>
</template>
具名插槽
理解：所謂具名插槽，就是這個(gè)插槽里丹喻，這個(gè)插槽被命了名薄货，使用者放進(jìn)來的東西，聲明了插槽的名稱碍论，會(huì)被分發(fā)進(jìn)這個(gè)具名插槽中谅猾。
寫法：使用template標(biāo)簽聲明具名插槽名稱<template v-slot:插槽名></template>
//自定義組件中
<template>
<div>
<div class='slot1'>
<slot name='slot1'><slot><!-- 名為“slot1”的具名插槽 -->
</div>
<div class='slot2'>
<slot name='slot2'><slot><!-- 名為“slot2”的具名插槽 -->
</div>
<slot><slot>//這里是個(gè)匿名插槽
</div>
</template>
//頁面(使用者)使用
<template>
<div>
<myComponent>
<template v-slot:slot1>
<p>名為slot1的具名插槽中</p>
</template>
<a>啦啦啦啦德瑪西亞</a>
<template v-slot:slot2>
<p>名為slot2的具名插槽中</p>
</template>
<p>啦啦啦啦德瑪西亞</p>
</myComponent>
</div>
</template>
代碼被分發(fā)到對(duì)應(yīng)插槽后的內(nèi)容
//自定義組件中
<template>
<div>
<div class='slot1'>
<div>
<p>名為slot1的具名插槽中</p>
</div>
</div>
<div class='slot2'>
<div>
<p>名為slot2的具名插槽中</p>
</div>
</div>
<div>
<a>啦啦啦啦德瑪西亞</a>
<p>啦啦啦啦德瑪西亞</p>
</div>
</div>
</template>
作用域插槽
理解：一種能夠?qū)⒆咏M件可用的內(nèi)容暴露給父組件的插槽。
比如：我們有的時(shí)候鳍悠，需要一些子組件里的東西税娜，做內(nèi)容拼接，就像一個(gè)用戶名輸入框贼涩，我們希望所有的用戶名巧涧，都跟隨一個(gè)user_的前綴，此處就可以使用到作用域插槽
//自定義組件中
<template>
<div>
<slot :user='username'><slot>//匿名插槽
</div>
</template>
<script>
export default {
data(){
return {
username:{
prefix:"user_"
}
}
}
}
</script>
//頁面(使用者)使用
<template>
<div>
<myComponent v-slot='obj'>
{{obj.user.prefix}}小寒大人
</myComponent>
</div>
</template>
編譯后的結(jié)果就變成了
<template>
<div>
<div>
user_小寒大人
</div>
</div>
</template>
默認(rèn)值(后備內(nèi)容)
理解
插槽是擁有默認(rèn)值功能的遥倦，如果對(duì)應(yīng)的slot沒有傳入內(nèi)容谤绳，則會(huì)使用slot的默認(rèn)值
寫法
以匿名參數(shù)為例
//自定義組件中
<template>
<div>
<slot><p>這里是默認(rèn)的內(nèi)容</p></slot>
</div>
</template>
//頁面(使用者)使用
<template>
<div>
<myComponent></myComponent>
<myComponent>替換了</myComponent>
</div>
</template>
最終表現(xiàn)結(jié)果為
<template>
<div>
<div>
<p>這里是默認(rèn)的內(nèi)容</p>
</div>
<div>
替換了
</div>
</div>
</template>
動(dòng)態(tài)插槽名
理解
可以使用動(dòng)態(tài)值來定某些內(nèi)容進(jìn)入某些具名插槽中
寫法
正常的具名插槽為v-slot:插槽名，動(dòng)態(tài)的寫法為v-slot:[dynamicSlotName]袒哥，此寫法僅在vue2.6.0后的vue中版本使用
簡(jiǎn)寫插槽名
正常的具名插槽為v-slot:插槽名缩筛，簡(jiǎn)寫的寫法為#插槽名，此寫法僅在vue2.6.0后vue中版本使用
