For example, I have a component written 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>
And I would like to reuse the component above from which I can extend:
// 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>
My questions:
data, methods, ... will be integrated in ChildComponent as that is a basic behavior of Vue mixin. But what about <template> part? How the markup parts are integrated together? Or is it ignored so that the only <script> part is merged?1- Yes it's possible but using extends option instead of mixins :
<template>
<div>
{{ txt }}
</div>
</template>
<script>
import ParentComponent from './Parent';
export default {
name: 'ChildComponent',
extends: ParentComponent,
created() {
this.sayHello();
}
}
</script>
2 - This inherits only the extended component options.