Currently, I am exploring the use of Vue3 for my project. One issue I am facing is that I need to create multiple components (SFC) with similar properties. I want to define these common properties using the composite API across all components, like so:
const withAnimationProps = () => {
return defineProps<{someproperties}>();
}
const withGraphicsProps = ()=>{
return defineProps<>();
}
For setting 'Animation properties' in a component, I would envision writing code such as:
/// setup script:
import {withAnimationProps} from 'somewhere';
const props = withAnimationProps();
....
// utilizing these props
However, it seems that Vue3 does not allow this approach.
To address this limitation, I have resorted to using Mixins to define the shared properties for these components:
/// Animation Mixin:
export default defineComponent({
props :{
......
// additional properties here
}
})
/// Graphics Mixin:
export default defineComponent({
props :{
......
// additional properties here
}
})
I can then incorporate them in my code as follows:
<script setup>
// accessing props defined in mixin:
const props = getCurrentInstance()?.props;
</script>
<script lang="ts">
import AnimationMixin from 'somewhere'
export default defineComponent({
mixins:[AnimationMixin]
})
</script>
My inquiry pertains to whether it is appropriate to mix Composite API with Option API in coding practices. Additionally, how might I implement certain OOP features (such as override or extend) using the composite API? Typically, I design components with an object-oriented mindset – could this conflict with the method-oriented Composite API?
Thank you!