vue之slot,組件標簽嵌套


vue之slot,組件標簽嵌套

插槽(Slot),在各種vue的ui插件中,經常見到的多個組件標簽相互嵌套(如下)就是以此為基礎的。

 <el-col >
       <el-checkbox >
</el-col>

而我們也經常會用到這種場景,例如封裝一個邊框樣式的組件,組件中的內容,可以通過這種方式制作,或者將子組件提取到父組件中進行操作等等。

slot分為兩種情況,匿名和具名。

1.匿名

例子:

子組件:

<div>
    <h2>我是子組件的標題</h2>
    <slot></slot>   /*這里插入父組件在引用子組件內部的內容*/
</div>

父組件:

<div>
    <h1>我是父組件的標題</h1>
    <my-component>
        <p>這是一些初始內容</p>
        <p>這是更多的初始內容</p>
    </my-component>
</div>

父組件p標簽的位置也可以放一些其他組件。my-component標簽中的內容,會插入到該組件slot標簽的位置。

當渲染后,就會變成:

<div>
    <h1>我是父組件的標題</h1>
    <div>
        <h2>我是子組件的標題</h2>
        <p>這是一些初始內容</p>
        <p>這是更多的初始內容</p>
    </div>
</div>

2.具名:

具名slot其實就是對匿名slot的補充,它可以做到將組件插入到子組件的指定位置。

例子:

子組件:

<div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <slot></slot>
</div>

父組件:

<my-component>
    <p>Lack of anonymous slot, this paragraph will not shown.</p>
    <p slot="footer">Here comes the footer content</p>
    <p slot="header">Here comes the header content</p>
</my-component>

渲染結果:

<div>
    <p>Here comes the header content</p>
    <p>Here comes the footer content</p>
    <p>Lack of anonymous slot, this paragraph will not shown.</p>
</div>

 

 

參考自:https://blog.csdn.net/u014628388/article/details/76100400

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM