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属性，可以按照书写顺序排序。