How to use Composite API to replace Mixin or Extends?

Question

I am trying to use Vue3 to create my project. My problem is that I want to create some different components(SFC) , these components has same properties (almost) , I want to define the properties using composite API for all components like this:

const withAnimationProps = () => {
  return defineProps<{someproperties}>();
}

const withGraphicsProps = ()=>{
  return defineProps<>();
}

When I want to define 'Animation properties' for some component , I will write code like this:

/// setup script:
import {withAnimationProps} from 'somewhere';
const props = withAnimationProps();
....
// to use these props

But Vue3 don't allow me to do that.

So I use Mixin to define the properties for these components:

/// Animation Mixin:
export default defineComponent({
  props :{
     ......
     // some properties here
  }
})

/// Graphics Mixin:
export default defineComponent({
  props :{
     ......
     // some properties here
  }
})

And I can use them like this :

<script setup>
// script setup can access the props defined in mixin:
const props = getCurrentInstance()?.props;
</script>

<script lang="ts">
import AnimationMixin from 'somewhere'
export default defineComponent({
     mixins:[AnimationMixin]
})
</script>

My question is that : is it correct to write code using Composite API mix with Option API? How can I implement some OOP features(override,extends,etc..) using composite API? I usually design component with object-oriented , does it conflic to Composite API(method-oriented)？

Regards!

Answer 1

I found the answer: export props define paramters out