關于Vue中的slot的理解

2019-8-25    seo達人

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







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



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

  <span slot="title">

    我是對話框標題

  </span>

  <!-- 這邊寫對話框的內容 -->

  <span>我是對話框內容</span>

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

    我是對話框footer

  </span>

</el-dialog>

效果是這樣:







今天研究了,我就查看了源碼:







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



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



slot不帶name,如下:



<slot></slot>

一個子組件只有一個匿名插槽,就好比對話框的內容沒有被含有slot="xx"屬性的標簽包裹,那么就會替換掉匿名插槽



2.具名插槽



slot 有name,如下



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

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


日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔