(Component composition) Inherit props/events from child component

I have a question regarding component composition. I’m often creating generic “base” components with some functionality, and then I create more specific versions of this component which contains the base component as its child.

Is it possible to “inherit” props and events from the base component so that they are automatically available on the specific versions as well? What I usually end up with is re-implementing those props/events and just passing it down to the child, but I am not sure if there is a better way?

Here is a very simple example illustrating what I mean:

Base component:

<template>
  <button @click="$emit('clicked')">{{ btnLabel }}</button>
</template>

<script>
export default {
  props: {
    btnLabel: String,
  },
};
</script>

Specific component:

<template>
  <base-component :btn-label="btnLabel" @clicked="$emit('clicked')"></base-component>
</template>

<script>
export default {
  props: {
    btnLabel: String,
  },
};
</script>

How the specific component is used:

<template>
  <specific-component :btn-label="Click me!" @clicked="clickedHandler"></specific-component>
</template>

A more practical use-case for this would be a base Dialog component which is used to create specific type of dialogs, like a ConfirmDialog, AlertDialog, etc. All of the derived dialogs should have the same behavior as the base dialog (i.e. expose the same events and take the same props).

Maybe I am doing it wrong by including the base component as a child? Is this what the extends feature is for, or is a mixin better suited for this task?

1 Like

Hi @sindrepm,

You probably solved the issue since the post is from 2017 but here is how I do it but just in case I rely to it.
Imo you don’t have to emit everytime the event, you can use the “transparent wrappers” pattern. On the child component you want just have to write: v-on="$listeners" to pass listeners from the parent.

Cheers.