在Vue,我可以转移道具吗?

时间:2016-05-29 23:00:30

标签: javascript vue.js

想象一下,我有一个<progress-bar> UI组件,我想创建一个<app-progress-bar>组件,它与<progress-bar>相同,但有一些样式调整。

AppProgressBar.vue:

<template> <progress-bar class="app-progress-bar"></progress-bar> </template>

这会因为<progress-bar>需要percent道具而中断。所以我可以传递它:

<progress-bar class="app-progress-bar" percent="percent"></progress-bar>

这似乎很好,但是当<progress-bar>有很多道具时很脆弱。我可以简单地通过所有道具吗?理论语法:

<progress-bar class="app-progress-bar" {...props}></progress-bar>

与React / JSX类似。

3 个答案:

答案 0 :(得分:1)

就像已经回答的那样,扩展组件将是在这种情况下创建组件的好方法。与其他语言中的类继承类似。

但是,您也可以将对象作为prop传递。如果你想保持干净,并且不想扩展你的组件,你可以通过这样的道具:

//object with many values that you need to pass. for ex.
myObjectWithSuff: { percent: 10%, someOtherStuff: value, ... } 

<progress-bar class="app-progress-bar" myProp="myObjectWithStuff"></progress-bar>

progress-bar组件中,声明道具myProp。然后,您可以访问该对象上的任何属性。例如:this.myProp.percent

这只是快速而简单,但根据您的架构,扩展组件可能是最佳选择。

答案 1 :(得分:0)

经过研究,我不认为这是可能的。相反,您可以extend组件并在extraClassdata上加computed个密钥:

import ProgressBar from './ProgressBar'

export default {
  extends: ProgressBar,
  data() {
    return { extraClass: 'app-progress-bar' }
  }
}

ProgressBar.vue:

<template>
  <div class="progress-bar" :class="extraClass">...</div>
</template>

这不像React那样干净或灵活,但它确实有效。

答案 2 :(得分:0)

摘要

这可以通过将$ attrs绑定到孩子来完成。因此,在您的情况下,它将是:

<template>
  <progress-bar v-bind="$attrs" class="app-progress-bar"></progress-bar>
</template>

链接到文档

  

vm。$ attrs:包含父级属性绑定(类和样式除外)...并且可以向下传递给内部组件

来源:Vue $attrs documentation

示例

让我们说一个名为<inner>的组件具有一个名为dark的布尔属性和一个名为color的字符串属性。

现在,我们定义一个名为<outer>的外部组件,该组件将<inner>包装在其定义中。

<template>
  <inner></inner>
</template>
.
.
.
name: 'outer'

这里的问题是,如果我们使用<outer>组件,则无法将深色和彩色道具传递到<inner>组件中,该组件知道如何处理它们。例如<inner dark color="blue"></inner>有效,但<outer dark color="blue"></outer>无效。

如果您将<outer>的定义更改为包括$attrs绑定,它将为您转移所有道具(不包括styleclass) 。这是新的定义:

<template>
  <inner v-bind="$attrs"></inner>
</template>
.
.
.
name: 'outer'

现在您可以使用<outer dark color="blue"></outer>

附加说明

默认情况下,您也可以使用inheritAttrs道具来防止此行为。您可以看一下official Vue docs here,我还发现this JSFiddle给出了inheritAttrs被使用的示例。