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

如何通过v-bind:style动态生成背景图? hot 7
force re-computation of a computed property hot 3
Error thrown when using transition-group with conditionally rendered children hot 3
Vuejs type inference does not work with TS 3.4.x hot 3
Property 'X' does not exist on type CombinedVueInstance using TypeScript Prop Validator hot 2
[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
Different functional componens has the same key hot 1
source:https://uonfu.com/
Github User Rank List