Vue组件插槽和默认内容同时存在时怎么设计才合理？

Des.皓轩提问于 2026-02-06 12:46:41 阅读 77

组件

我在做可复用的卡片组件时遇到个困惑，想让组件既能显示默认内容，又能被用户自定义覆盖。比如这样写：


<template>
  <div class="card">
    <slot>这里是默认标题</slot>
    <div>固定内容区域</div>
  </div>
</template>

但父组件使用时如果传了插槽内容，固定区域就会被一起替换掉。试过把固定内容放在后面，结果默认标题就失效了。该怎么设计才能让默认标题可替换，而固定区域始终保留呢？感觉结构设计哪里有问题…

自定义组件设计思路

我来解答赞 17 收藏

反馈

2 条解答

小乙豪 Lv1

你贴的代码其实逻辑是对的，slot的默认内容只有在没传插槽时才会显示，固定内容区域在外面不会被替换。

可能你理解上有偏差，或者实际代码写得有问题。直接看这个例子：

子组件 Card.vue：

<template>

  <div class="card">

    <slot name="title">默认标题</slot>

    <div class="fixed-area">固定内容区域</div>

  </div>

</template>

父组件使用：

<!-- 不传插槽，显示默认标题 -->

<Card />



<!-- 传了插槽，覆盖默认标题，固定区域不受影响 -->

<Card>

  <template #title>

    自定义标题

  </template>

</Card>

用具名插槽会更清晰，想覆盖哪个部分就传哪个slot，不传就用默认的。

如果你想让固定区域也有默认值但可被覆盖，可以这样：

<template>

  <div class="card">

    <slot name="title">默认标题</slot>

    <slot name="content">

      <div class="fixed-area">固定内容区域</div>

    </slot>

  </div>

</template>

复制过去试试，slot机制本身就支持默认内容+可覆盖，不用想太复杂。

2026-03-02 19:11

Mr.亚龙 Lv1

你这结构确实有问题，默认内容和固定区域互相干扰了。解决方法很简单，把固定内容单独拎出来放在外面就行。我一般直接这么写：

这样父组件用的时候，不管是用默认标题还是自定义内容，固定区域都不会被替换掉。样式你自己加个class控制下间距就行。

2026-02-06 13:05