如何将Fallthrough Attributes（透传属性）绑定到插槽？

你当前的写法无法生效，核心原因是：插槽内的组件属于父组件作用域，<slot v-bind="$attrs">只是把属性绑定到插槽占位符上，并不会自动传递给插槽内的子组件。要实现属性透传，需要通过作用域插槽显式传递属性，或者通过渲染函数自动处理子组件的属性合并。

方案一：作用域插槽显式传递（推荐，灵活性高） #

修改Fallthrough组件，将$attrs作为作用域数据暴露给父组件：

<script>
export default {
  inheritAttrs: false,
};
</script>

<template>
  <slot :attrs="$attrs"></slot>
</template>

在父组件中，通过v-slot接收作用域数据，再绑定到子组件上：

<Fallthrough class="class-a">
  <template v-slot="{ attrs }">
    <ComponentA v-if="cond" v-bind="attrs" />
    <ComponentB v-else v-bind="attrs" class="class-b" />
  </template>
</Fallthrough>

这样父组件可以精确控制属性传递的目标，同时支持子组件自身属性和透传属性的合并（比如class会自动合并）。

方案二：渲染函数自动合并属性（无需修改父组件写法） #

如果希望保持父组件的原有写法，不需要手动写v-slot，可以通过渲染函数直接操作插槽子节点，合并属性：

<script>
export default {
  inheritAttrs: false,
  render(h) {
    // 获取默认插槽的第一个子组件
    const child = this.$slots.default?.[0];
    if (!child) return null;

    // 合并子组件原有属性与透传的$attrs
    return h(
      child.componentOptions?.Ctor || child.tag,
      {
        ...child.data,
        attrs: { ...child.data.attrs, ...this.$attrs },
        // 单独处理class，确保原有class和透传class合并
        class: [child.data.class, this.$attrs.class],
      },
      child.children
    );
  },
};
</script>

父组件依旧使用你最初的写法即可：

<Fallthrough class="class-a">
  <ComponentA v-if="cond" />
  <ComponentB class="class-b" v-else />
</Fallthrough>

这个方案会自动把Fallthrough的属性合并到插槽第一个子组件上，适合不需要灵活控制属性传递的场景。

内容的提问来源于stack exchange，提问作者Vlad Faust