Consider this scenario, where I have a component created in SFC format:
// Parent.vue
<template>
<div>
{{ txt }}
</div>
</template>
<script>
export default {
name: 'ParentComponent',
data() {
return {
txt: 'Hello, world! I\'m Parent'
}
},
methods: {
sayHello() {
console.log(this.txt);
}
}
}
</script>
Now, I want to reuse the above component and extend it:
// Child.vue
<template>
<div>
{{ txt }}
</div>
</template>
<script>
import ParentComponent from './Parent';
export default {
name: 'ChildComponent',
mixins: [ParentComponent],
created() {
this.sayHello(); // 'Hello, world! I'm Parent'
}
}
</script>
Here are some questions that arise:
- Can this approach be implemented effectively?
- If yes, how are the vue component properties such as
data,methods, etc. merged intoChildComponentsince mixins follow this basic behavior in Vue? What happens to the<template>section - is it included or ignored during merging, leaving only the<script>part combined?