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

Question

想象一下，我有一个<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。

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

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

Answer 2

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

import ProgressBar from './ProgressBar'

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

进度条.vue：

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

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

Answer 3

抽象的

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

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

链接到文档

vm.$attrs：包含父范围属性绑定（类和样式除外）...并且可以向下传递给内部组件

来源： 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 文档，我还发现了这个 JSFiddle ，它给出了一个使用inheritAttrs的例子。