Vue 如何将传递给第二级子组件的 props 复用给顶层组件？

[agdhole]

问题如下：

1.我有一个 BaseCard 组件，代码：

  <v-card :light="light" :dark="dark" :color="color">
    <slot />
  </v-card>
  
  props: {
    dark: {
      type: Boolean
    },
    light: {
      type: Boolean
    },
    color: {
      type: String
    }
  }

2.然后创建了基于该 BaseCard 组件扩展的二级子组件 InfoCard：

 <base-card :light="light" :dark="dark" :color="color">
   <div>
     info card
   </div>
 </base-card>
 
 props: {same from base}

3.在 Vue page 调用二级子组件时的代码如下：

 <info-card color="" light="" />

问题在于：

如果我创建了多个基于 BaseCard 组件的二级子组件，
那么我想要为每个二级子组件都可以使用 :light="light" :dark="dark" :color="color" 这类 BaseCard 的属性，就需要为每个二级子组件都编写这一堆相同的 props。

有没有办法让每个基于 BaseCard 的二级子组件都自动继承 BaseCard 的属性，不用编写重复的代码？

[juzisang]

```js
import BaseCard from './BaseCard'

{
props:{
...BaseCard.props
}
}

```

[toesbieya]

$attrs 可以，不过缺点是使用了$attrs 的组件会在父组件 render 时也 render，不知道 vue3 里有没有解决

[agdhole]

@juzisang #1 非常感谢！茅塞顿开，
我刚才尝试了一下，props 可以直接这样复用，但是模板里面仍然要编写这类的属性 <base-card :color="">，有没有办法在模板中也自动继承呢？

[agdhole]

我使用 `v-bind` 来解决了模板内复用的这个问题：

`<base-card v-bind="$props">`

谢谢大家！