免费A级毛片无码A_99久久国产综合精品SWAG_亚洲国产天堂久久综合_夜夜爽一区二区三区精品 欧美日韩无套内射另类_婷婷五月俺也去人妻_日产精品久久久久久久性色_天堂大香蕉在线视频

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

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

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







這是element-ui對(duì)話框的api，當(dāng)時(shí)我記得我百度過(guò)，就是這樣寫就ok了，當(dāng)時(shí)也沒(méi)深究。



<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)容沒(méi)有被含有slot="xx"屬性的標(biāo)簽包裹，那么就會(huì)替換掉匿名插槽



2.具名插槽



slot 有name，如下



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

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


日歷

鏈接

個(gè)人資料

存檔