无码一区二区三区中文字幕

<button id="c4ceg"></button>

關(guān)于Vue中的slot的理解

2019-8-25 seo達(dá)人

今天在做vue項目的時候，遇到一個問題就是slot插槽的概念。這突然讓我想起用過類似于element-ui前端框架時，用他們組件的時候接觸過slot，如下圖：

這是element-ui對話框的api，當(dāng)時我記得我百度過，就是這樣寫就ok了，當(dāng)時也沒深究。

<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

<span slot="title">

我是對話框標(biāo)題

</span>



<span>我是對話框內(nèi)容</span>

<span slot="footer" class="dialog-footer">

我是對話框footer

</span>

</el-dialog>

效果是這樣：

今天研究了，我就查看了源碼：

百度的發(fā)現(xiàn)這邊有兩個概念：

1.單個插槽也叫匿名插槽

slot不帶name，如下：

<slot></slot>

一個子組件只有一個匿名插槽，就好比對話框的內(nèi)容沒有被含有slot="xx"屬性的標(biāo)簽包裹，那么就會替換掉匿名插槽

2.具名插槽

slot 有name，如下

<slot name='xx'></slot>

具名插槽就可以有多個，就好比對話框含有slot='header'屬性的標(biāo)簽會替換掉子組件<slot name='header'></slot>