Vue.js的slot插槽是什么?如何使用插槽?

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>