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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1363 天前的主题，其中的信息可能已经有所发展或是发生改变。

问题如下：

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

组件

color

Light

basecard

4 条回复 • 2021-02-18 19:07:20 +08:00

juzisang

2021-02-18 18:43:17 +08:00

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

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

```

toesbieya

2021-02-18 18:45:35 +08:00

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

agdhole

2021-02-18 18:54:20 +08:00

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

agdhole

2021-02-18 19:07:20 +08:00

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

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

谢谢大家！