Sometimes, we want to extend another Vue.js component in a single-file component.
In this article, we’ll look at how to extend another Vue.js component in a single-file component.
How to extend another Vue.js component in a single-file component?
To extend another Vue.js component in a single-file component, we can use Vue.extend on the base component.
And then we can extend the base component by calling extend on the base component.
For instance, we write
Foo.vue
<script>
import Vue from "vue";
export default Vue.extend({
//...
});
</script>
to call Vue.extend with the component options object and export it.
And then we can extend the Foo.vue component by writing
<script>
import Foo from "./Foo";
export default Foo.extend({
//...
});
</script>
to call Foo.extend with the component object definition to extend the Foo component.
Conclusion
To extend another Vue.js component in a single-file component, we can use Vue.extend on the base component.
And then we can extend the base component by calling extend on the base component.
