profile
viewpoint

Ask questionsProposal: Template inheritance using the slots mechanism

What problem does this feature solve?

Within a large application that makes heavy use of inheritance and mixins, the lack of template inheritance causes much jumping through hoops. The rationale under #5401 is eloquently written and captures the gist of it, so I won't repeat it here.

What does the proposed API look like?

My proposal for solving this issue is to simply extend upon the existing slots mechanism. That is (shamelessly copy/pasting from @simplesmiler's example under the issue above):

<!-- parent.vue -->
<template>
  <div>
    <slot name="header">
      <h3>Default header</h3>
    </slot>
    
    <slot><!-- yup, default --></slot>
    
    <slot name="body">
      <p>Default body</p>
    </slot>
    
    <slot name="footer">
      <!-- no footer by default -->
    </slot>
    
  </div>
</template>
<!-- child.vue -->
<template extends> <!-- here be magic -->
  This stuff
  <h2 slot="header">More pronounced header</h2>
  goes into
  <p slot="footer">Footer added by the child</p>
  the default slot.
</template>

Thus the existing composition rules are preserved, while it feels natural to both Vue developers and people used to templates with block-based inheritance (like Django, Pug etc.)

The only rules are that

  • an empty extends attribute can be used only with single-file components,
  • or it must be given a value when extending a DOM element:extends="#template-element",
  • and of course, that <template extends> can allow multiple root elements.

<!-- generated by vue-issues. DO NOT REMOVE -->

vuejs/vue

Answer questions MannikJ

i don't think he knows what inheritance really is...

What does that refer to?

useful!

Related questions

[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded" while navigating to another route hot 1
关于keep-alive缓存页面问题请教 hot 1
Can not clear slot content with vue@2.5.3 hot 1
TypeError: Cannot read property 'toLowerCase' of undefined at emptyNodeAt hot 1
VNode.componentInstance is undefined when rendered by a functional component hot 1
Korean input trigger keydown event twice hot 1
Memory leak when using "transition" and "keep-alive" hot 1
Error in v-on handler: "RangeError: Maximum call stack size exceeded" hot 1
如何通过v-bind:style动态生成背景图? hot 1
如何通过v-bind:style动态生成背景图? hot 1
IE11, console print: [Vue warn]: Error in nextTick: "Error: Invalid argument." But work well with chrome hot 1
v-bind:style 'background-image' error: url is not a function hot 1
force re-computation of a computed property hot 1
v-model on mobile not updating until a space is pressed hot 1
There is no a attribute like react's $$typeof to prevent XSS injection in the vnode of Vue. hot 1
Github User Rank List