Vue透明包装组件，修改一些道具

Question

我有一个Vue组件，该组件已多次使用相同的道具。我想通过始终在单个位置添加这些道具来保持代码干燥。

示例：

<wrapped-foo bar=1 />

应扩展为

<real-foo bar=1 spam=eggs />

我正在尝试使用一个包装器组件解决此问题，该组件将给定的道具进行修改，然后将其传递给包装的组件。有关如何执行此操作的教程很多，例如

• vue wrap another component, passing props and events
• https://vuejs.org/v2/guide/render-function.html#Functional-Components

似乎所有解决方案都没有将道具class，style，事件侦听器，其他属性中的至少一个传递给包装的组件。有没有可以使所有这些完好无损的解决方案？

Answer 1

您可以使用Vue Mixins：https://vuejs.org/v2/guide/mixins.html

或者只是继承：

示例：

const wrappedFoo = Vue.component('real-foo').extend({
  props: {
    spam: ...
  }
})
Vue.component('wrapped-foo', wrappedFoo)