vue中slot組件的使用

插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。

Slot 是在組件模板中設置的用於在父組件中插入其孫子組件（即自身的子組件）或DOM片段的插槽。

匿名solt

子組件中

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

父組件中

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

最后結果

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

當我們要在一個組件中引入另外一個組件時，子組件就可以使用slot,父組件則引入子組件的組件名即可。

具名slot

具名Slot就是會為模板中不同部分指定相應的插入位置。但是當部分內容沒有找到對應的插入位置，就會依次插入匿名的slot中，

當沒有找到匿名slot時，這段內容就會被拋棄掉。

子組件中

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

父組件中

<slider>
    <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>
</slider>

最后結果

<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>

 

 

這是slot的基本用法，其他用法可參考：

https://www.w3cplus.com/vue/vue-slot.html