slot插槽

匿名槽口

当组件A,B具有共同点时，他们的共同部分可以抽离出来

• 封装成一个单独的组件aaa，需要添加各自特有的内容时，在aaa组件的对应位置添加一对slot标签（内容为空）
• 然后在A,B组件中分别引用、注册、调用aaa组件
• 在aaa标签中，引入想要添加的内容，改内容会自动替换slot标签。如下所示：
  组件A：

<div id = "app">
        <aaa>
            <h3>slot槽口插入的内容</h3>
        </aaa>
</div>

组件aaa：

    <template id="aaa">
        <div class = "aaa">
            <slot></slot>
            <p>我是aaa组件</p>
        </div>
    </template>

结果为：

• 若slot标签不为空时

<template id="aaa">
        <div class = "aaa">
            <slot>我是后备内容</slot>
        </div>
</template>

• 同时aaa标签中没有任何内容

<div id = "app">
        <aaa>
        </aaa>
</div>

• 则slot中的内容会被渲染为：

<template id="aaa">
        <div class = "aaa">
            我是后备内容
        </div>
</template>

具名槽口

父组件在子组件标签内写的多个内容可以通过设置slot属性来命名，在子组件的模板通过使用带有name属性的标签放置对应的slot,若slot属性不存在，则slot标签内的内容就会出现。
slot标签中的name属性可指定槽口名称，在父组件中通过slot=“槽口名称”来使用。

<div id = "app">
        <aaa>
            <!-- <h3>slot槽口插入的内容</h3> -->
            <p slot = "s1">在上面的内容</p>
            <p slot = "s2">在下面的内容</p>
        </aaa>
    </div>

    <template id="aaa">
        <div class = "aaa">
            <slot name = "s1"></slot>
            <p>我是aaa组件</p>
            <slot name = "s2"></slot>
        </div>
    </template>
    ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200816192807201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzUxODg3Mg==,size_16,color_FFFFFF,t_70#pic_center)