slot(插槽)是Vue.js中用于分发内容到组件的一种机制。在组件中使用slot可以让组件变得更加灵活,让使用者可以根据需要填充不同的内容。Vue.js中的插槽有具名插槽和匿名插槽两种类型。
使用具名插槽,可以在组件中定义多个插槽,并在父组件中通过插槽名来填充内容,例如:
在组件中定义具名插槽:
<template>
<div>
<slot name="header"></slot>
<div class="content">
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
</template>
在父组件中使用插槽填充内容:
<template>
<my-component>
<template slot="header">
<h1>Header Content</h1>
</template>
<p>Default Content</p>
<template slot="footer">
<p>Footer Content</p>
</template>
</my-component>
</template>
使用匿名插槽,可以在组件中定义一个默认插槽,父组件在使用时可以直接将内容放在组件中,例如:
在组件中定义匿名插槽:
<template>
<div>
<slot></slot>
</div>
</template>
在父组件中使用插槽填充内容:
<template>
<my-component>
<p>Default Content</p>
</my-component>
</template>