V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
agdhole
V2EX  ›  问与答

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

  •  
  •   agdhole · 286 天前 · 395 次点击
    这是一个创建于 286 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题如下:

    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 条回复    2021-02-18 19:07:20 +08:00
    juzisang
        1
    juzisang   286 天前   ❤️ 1
    ```js
    import BaseCard from './BaseCard'

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

    ```
    toesbieya
        2
    toesbieya   286 天前   ❤️ 1
    $attrs 可以,不过缺点是使用了$attrs 的组件会在父组件 render 时也 render,不知道 vue3 里有没有解决
    agdhole
        3
    agdhole   286 天前
    @juzisang #1 非常感谢!茅塞顿开,
    我刚才尝试了一下,props 可以直接这样复用,但是模板里面仍然要编写这类的属性 <base-card :color="">,有没有办法在模板中也自动继承呢?
    agdhole
        4
    agdhole   286 天前
    我使用 `v-bind` 来解决了模板内复用的这个问题:

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

    谢谢大家!
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1352 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 18:10 · PVG 02:10 · LAX 10:10 · JFK 13:10
    ♥ Do have faith in what you're doing.