2019-8-25 seo達(dá)人
今天在做vue項(xiàng)目的時(shí)候，遇到一個(gè)問題就是slot插槽的概念。這突然讓我想起用過類似于element-ui前端框架時(shí)，用他們組件的時(shí)候接觸過slot，如下圖：
這是element-ui對(duì)話框的api，當(dāng)時(shí)我記得我百度過，就是這樣寫就ok了，當(dāng)時(shí)也沒深究。
<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<span slot="title">
我是對(duì)話框標(biāo)題
</span>
<!-- 這邊寫對(duì)話框的內(nèi)容 -->
<span>我是對(duì)話框內(nèi)容</span>
<span slot="footer" class="dialog-footer">
我是對(duì)話框footer
</span>
</el-dialog>
效果是這樣：
今天研究了，我就查看了源碼：
百度的發(fā)現(xiàn)這邊有兩個(gè)概念：
1.單個(gè)插槽也叫匿名插槽
slot不帶name，如下：
<slot></slot>
一個(gè)子組件只有一個(gè)匿名插槽，就好比對(duì)話框的內(nèi)容沒有被含有slot="xx"屬性的標(biāo)簽包裹，那么就會(huì)替換掉匿名插槽
2.具名插槽
slot 有name，如下
<slot name='xx'></slot>
具名插槽就可以有多個(gè)，就好比對(duì)話框含有slot='header'屬性的標(biāo)簽會(huì)替換掉子組件<slot name='header'></slot>
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com