vue中插槽slot的使用

一、插槽 ：slot

1、使用情況：當子組件在父組件中當標簽使用時，如果子組件內部需要進行嵌套一些代碼內容時，這時候就需要在子組件內插入插槽。

例子：父組件：

其中<home-com>標簽內是需要嵌套的代碼，若直接這樣寫是無法在頁面中顯示的，

<template>
    <div id="app">
       <header-com></header-com>
            <home-com>
                <p>11</p>
                <p>222</p>
                <p>333</p>
                <h3 slot="box">小王</h3>
                <h3 slot="con">小皮</h3>
                            
                <ul slot="list">
                    <li>aaaa</li>
                    <li>bbbb</li>
                    <li>cccc</li>
                    <li>ddd</li>
                </ul>
            </home-com>
    </div>
</template>

子組件：

<template>
    <div class="home content">
        <slot name="box"></slot>
        home
        <slot></slot>

         <slot name="con"></slot>
         <slot name="list"></slot>
    </div>
</template>

其中，給slot 標簽增加name屬性，並按照順序排序，會控制子組件標簽中的代碼內容的顯示順序。

瀏覽器顯示順序為：（截圖好麻煩，還得導入，直接上文字嘍。。。）

小王
home
11

222

333

小皮
aaaa
bbbb
cccc
ddd

 

總結一波：在子組件中插入slot標簽，可以接收在父組件中子組件標簽內的所有內容。如果給子組件標簽內容中的內容增加slot屬性，並子組件中給slot增加name屬性，可以按照書寫順序排序。