vuejs中slot插槽的使用

slot 是一种用于组件之间传递内容的机制。它允许您在组件的模板中定义一个或多个插槽，并在使用该组件时将内容插入到插槽中。

slot的使用

1. 默认插槽：当组件没有具名插槽时，内容将插入到默认插槽中。您可以在组件的模板中使用<slot></slot>标签定义默认插槽，如下所示：

<template>
    <div>
        <h2>组件标题</h2>
        <slot></slot> 
    </div>
</template>

• 在使用该组件时，可以在组件标签的内部添加内容，这些内容将会被插入到默认插槽中：

<my-component>
    <p>这是插入到默认插槽中的内容</p>
</my-component>

• 上述代码中，<p>这是插入到默认插槽中的内容</p>将会替换掉<slot></slot>标签，并显示在组件的模板中。

2. 具名插槽：如果您希望将内容插入到组件模板中的特定位置，可以使用具名插槽。您可以在组件的模板中使用<slot name="slotName"></slot>标签定义具名插槽，其中slotName是插槽的名称。如下所示：

<template>
    <div>
        <h2>组件标题</h2>
        <slot name="content"></slot> 
        <p>内容</p>
    </div>
</template>

• 在使用该组件时，可以在组件标签的内部使用<template v-slot:slotName>或<template #slotName>或<template slot="slotName">来插入具名插槽的内容：

<template #slotName>：vue@2.5.17版本暂未实现

<my-component>
    <template v-slot:content>
        <p>这是插入到具名插槽中的内容</p> 
    </template>
</my-component>

• 上述代码中，<p>这是插入到具名插槽中的内容</p>将会替换掉<slot name="content"></slot>标签，并显示在组件的模板中。

插槽还支持作用域插槽，可以通过在插槽中使用<slot :name="slotName" v-bind="slotProps"></slot>来传递数据给插槽内容。