Description
What problem does this feature solve?
In large applications, there are often families of components, within which components share most of the look/behavior, but vary slightly. This makes it desirable to reuse code between them. Some reuse can be achieved with slots, other is better with component inheritance. But while most of the parent component definition can be smart-merged with child definition, the template has to be either kept as is, or replaced entirely.
I have seen multiple approaches to reusing component templates:
-
Write very granular appearance-only components with many slots. While this sounds good in theory, in practice the granularity needed often makes this approach into an obstruction rather than abstraction.
-
Implement all required variation in a single component and make it configurable with slots and props. The downside is that you are stuck with a god-component, which is hard to maintain and extend further.
-
Extend the component, and use
<parent>...</parent>
in the child template, using slots as "parts". The downside is that you have to "proxy" all props and slots down and events up. This is very cumbersome and fragile. -
Split the component in question further into "part" components, so that you can override only certain part. This gets tedious very quickly, especially when you need
v-bind
orv-on
inside of the overridden part. -
Define "part" render functions among the methods, so that they can be overridden. The downside is that you can not really write such parts in template DSL, and the parts get disconnected from the main template, which makes it harder to understand.
What does the proposed API look like?
The Pug template engine (former Jade) implements a feature called blocks, which allows templates to extend other templates while overwriting (or extending) certain named blocks. I think this feature ported to Vue would fill the gap described above, and allow the templates to be more reusable.
A possible syntax:
<!-- parent.vue -->
<template>
<div>
<block name="header">
<h3>Default header</h3>
</block>
<block name="body">
<p>Default body</p>
</block>
<block name="footer">
<!-- no footer by default -->
</block>
</div>
</template>
<!-- child.vue -->
<!-- there is no root element (only blocks), so the parent template is reused -->
<template>
<block name="header">
<h2>More pronounced header</h2>
</block>
<block name="footer">
<p>Footer added by the child</p>
</block>
</template>