在Vue，我可以转移道具吗？

Question

假设我有一个<progress-bar> UI组件，我希望创建一个与<progress-bar>相同的<app-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类似。

Answer 1

经过研究，我认为这是不可能的。相反，您可以使用extend组件并在data或computed上放置一个extraClass键。

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>

这并不像反应那样干净和灵活，但它有效。

Answer 2

与已经回答的一样，扩展组件将是在此场景中创建组件的好方法。类似于其他语言中的类继承。

但是，您也可以传递一个对象作为支柱。如果您想保持事物整洁，并且不想扩展您的组件，您可以传递这样一个道具：

//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。

这是快速和简单的，但根据您的架构，扩展组件可能是可行的。

Answer 3

文摘

这可以通过将$attrs绑定到子节点来实现。所以在你的情况下应该是：

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

链接到Docs

vm.$attrs:包含父范围属性绑定(类和样式除外)...and可以传递给内部组件

来源：Vue $attrs文档

示例

假设一个名为<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绑定，它将为您传输所有支持(这不包括style和class)。以下是新的定义：

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

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

附加注

默认情况下，您还可以使用inheritAttrs支柱来防止这种行为。您可以看看官方Vue docs在这里，我还找到了这个JSFiddle，它给出了使用inheritAttrs的一个例子。