Vue 3嵌套包装组件：二次封装DefaultButton需重复传递属性与插槽吗？

核心结论 #

不需要盲目重复写v-bind="$attrs"和插槽模板，完全取决于你对SomeIconButton的功能定位：

场景1：仅做固定图标封装 #

如果SomeIconButton只是给DefaultButton绑定一个固定图标，不需要接收父组件的额外属性（比如尺寸、禁用状态、点击事件）或插槽内容，那第一种写法就够了：

<template>
  <default-btn icon="some-icon"></default-btn>
</template>

<script setup></script>

这种写法下，组件是完全封闭的，只提供带固定图标的按钮样式，不对外暴露任何额外接口。

场景2：需要传递父组件的属性和插槽 #

如果希望SomeIconButton能像DefaultButton一样，支持父组件传参（比如size="lg"、@click="handleClick"）和自定义插槽内容（比如按钮文本、额外图标），那必须加上v-bind="$attrs"和插槽转发逻辑：

<template>
  <default-btn v-bind="$attrs" icon="some-icon">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </default-btn>
</template>

<script setup></script>

为什么要加？ #

• v-bind="$attrs"：会自动把父组件传给SomeIconButton的所有未被props接收的属性/事件，转发给内部的default-btn，不用手动逐个传递。
• 插槽循环：确保父组件传给SomeIconButton的所有插槽（默认插槽、具名插槽）都能透传给default-btn，比如父组件写<some-icon-btn>点击提交</some-icon-btn>，这段文本能正常显示在按钮里。

小技巧：简化重复代码 #

如果项目里有多个这类按钮变体组件，可以用Vue 3的组合式API让代码更清晰：

<template>
  <default-btn v-bind="attrs" icon="some-icon">
    <template v-for="(_, slot) in slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </default-btn>
</template>

<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>

内容的提问来源于stack exchange，提问作者Robert Strauch