VueJS extend component for customization

Question

Is there any way to use some Generic component and keep it's props emitters etc and just customize it?

Example:

<template>
   <GenericComponent color="black">
     Something in the default slot
  </GenericComponent>
</template>
<script>
import GenericComponent  from 'GenericComponent'
export default {
  name: 'MyCustomizedComponent'

  props: // to take same props as GenericComponent and pass it to GenericCompnent?
  // and it emits all events from GenericComponent
 // I could probably just copy props and pass it directly to GenericComponent, but what if there 
 // is many 
}
</script>
<style scoped>
//some changes to Generic component
<style>

So I could just create props, and define all @ from GenericComponent and emit them same way, but is there any easy way to do it ?

Yes, you can use mixins for that vuejs.org/v2/guide/mixins.html — Daniel Rodríguez Meza
– Daniel Rodríguez Meza, Commented Jun 3, 2021 at 16:59

Lars · Accepted Answer · 2021-06-03 17:38:32Z

1

You can either use mixins, to reuse code across several components.

You can also create a wrapper component to the original component, do your customizations, and use v-bind="$props" to propagate all props to the original component and v-on="$listeners" to emit all events from the original component to the parent.

I'm not sure what is best for your case.

answered Jun 3, 2021 at 17:38

Lars

7985 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS extend component for customization

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related