CODEWITHSUNDEEP
vue.js
Jonas H.
Jonas H.

Reputation: 2491

Vue transparently wrap component, modify some props

I have a Vue component that's used multiple times with identical props. I'd like to keep the code DRY by always adding these props in a single place.

Example:

<wrapped-foo bar=1 />

should be extended to

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

I'm trying to solve this using a wrapper component that takes the props given, modifies them, and passes them to the wrapped component. There are multiple tutorials on how to do this, e.g.

It looks like all of the solutions don't pass at least one of props, class, style, event listeners, other attributes, etc. to the wrapped component. Is there a solution that keeps all of these intact?

Upvotes: 0

Views: 400

Answers (1)

Jonas H.
Jonas H.

Reputation: 2491

You can do it with Vue Mixins: https://v2.vuejs.org/v2/guide/mixins.html

Or simply with inheritance:

Example:

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

Upvotes: 1

Related Questions