Exploring Base.vue
<template><div>{{ name }}</div></template>
<script>
export default {
data() {
return {name: 'Example Component'};
}
};
</script>
And introducing Extended.vue:
<script>
import Base from './Base.vue';
export default {
extends: Base,
data() {
return {name: 'Extended Example Component'};
}
};
</script>
Is there a way to utilize the data from the base component instead of manually inputting Extended Example Component? Is it possible to implement something similar to super in OOP? Seeking a universal solution involving concepts like mount, methods, computed, etc.
UPDATE
In object-oriented programming, we typically use this method (Python example):
class Base:
def __init__(self):
self.name = 'Example Component'
class Extended(Base):
def __init__(self):
super().__init__()
self.name = f'Extended {self.name}'
This approach allows us to reuse the self.name field.