vue插槽

最新推荐文章于 2025-03-31 18:10:20 发布

原创最新推荐文章于 2025-03-31 18:10:20 发布 · 144 阅读

CC 4.0 BY-SA版权

博客介绍了Vue中插槽的使用。在按钮组件添加文字内容时会用到插槽slot，它可分发组件内容。需要多个插槽时用具名slot，父级定义的内容会出现在对应slot里。组件里还能写默认内容，父级未写slot时会显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果要给按钮组件 <i-button> 添加一些文字内容，就要用到组件中的插槽： slot，它可以分发组件的内容，比如在按钮组件中定义一个插槽：

<template>
  <button :class="'i-button-size' + size" :disabled="disabled">
    <slot></slot>
  </button>
</template>

这里的 <slot> 节点就是指定的一个插槽的位置，这样在组件内部就可以扩展内容了：

<i-button>按钮 1</i-button>
<i-button>
  <strong>按钮 2</strong>
</i-button>

当需要多个插槽时，会用到具名 slot，比如上面的组件我们再增加一个 slot，用于设置另一个图标组件：

<template>
  <button :class="'i-button-size' + size" :disabled="disabled">
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>

<i-button>
  <i-icon slot="icon" type="checkmark"></i-icon>
  按钮 1
</i-button>

这样，父级内定义的内容，就会出现在组件对应的 slot 里，没有写名字的，就是默认的 slot。

在组件的 <slot> 里也可以写一些默认的内容，这样在父级没有写任何 slot 时，它们就会出现，比如：

<slot>提交</slot>