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

資深大佬 : agdhole 4

问题如下：

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 的属性，不用编写重复的代码？

大佬有話說 (4)

資深大佬 : 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”>`

谢谢大家！