CODEWITHSUNDEEP
vue.jscomponents
uneasy
uneasy

Reputation: 629

VueJS extend component for customization

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 ?

Upvotes: 1

Views: 228

Answers (1)

Lars
Lars

Reputation: 788

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.

Upvotes: 1

Related Questions