vue2插槽语法（slot元素）

一、匿名插槽（默认插槽，只有一个）

不写name属性即可。

<template>
<div class="child">
 <slot/>
</div>
</template>

<template>
<div class="parent">
 <Child>
    xxxx这块自对应内容，会被展示到默认插槽位置中。
 </Child>
</div>
</template>

二、具名插槽（有名插槽，可以声明多个）

通过 name字段声明插槽名；通过指令 v-slot:插槽名来使用。

<template>
<div class="child">
 <slot name="xx"></slot>
 <slot name="xxx"></slot>
</div>
</template>

<template>
<div class="parent">
 <Child>
    <template v-slot:xx>
        这是插槽xx块要显示的
    </template>
    <template v-slot:xxx>
        这是插槽xxx块要显示的
     </template>
 </Child>
</div>
</template>

三、作用域插槽

参考链接:

• https://blog.csdn.net/weixin_53614367/article/details/123512913