Skip to content

Instantly share code, notes, and snippets.

@zach2825
Created January 17, 2023 19:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zach2825/fc258d5a7ae1848c2559c105d807617f to your computer and use it in GitHub Desktop.
Save zach2825/fc258d5a7ae1848c2559c105d807617f to your computer and use it in GitHub Desktop.
SampleComponent vue3 vue.extend replacement
<template>
<div>
Welcome<br />
<SampleVueComponent :testing-prop="'test'" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface Mehtods {
someTest: () => void;
}
interface Data {
message: string;
}
interface Computed {
preMessage: string;
}
interface Props {
testingProp: 'test' | 'working';
}
function createComponent<M extends Mehtods, D extends Data, C extends Computed, P extends Props>(options: {
name: string;
data: () => D;
methods: M;
computed: C;
props?: P;
}) {
return defineComponent({
name: options.name,
data() {
return options.data();
},
methods: options.methods,
computed: options.computed,
props: options.props
});
}
const SampleVueComponent = createComponent<Methods, Data, Computed, Props>({
name: 'SampleVueComponent',
data(){
return {
message: 'World'
}
},
methods: {
someTest(){
console.log('Hello World', this.method)
}
},
computed: {
preMessage(){
return 'Hello'
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment