How to do the reverse of what a vuejs slot does normally according to the documentation?

Question

After reading the documentation on slots I've come away not really understanding why they are useful, because it seems they function exactly opposite of what I need to do.

For those familiar with ASP.NET, what I really want is an @section. That is I have my main page layout defined in some component, and within that component I want to control one small section from within the child where the hierarchy of markup does not make this easy.

I want to have basically this same markup in my application as in the docs:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

The issue is that I want this to live in my higher level component, and then within the child I want to specify the content that goes in header, for example:

<template>
    <div>
        <h1 slot="header">Name Of This Page {{ DataFromChildContext }}</h1>
        <div id="remainder-of-child">
        <!snip...-->
        </div>
    </div>
</template>

The documentation is pretty clear, this goes in the PARENT:

To provide content to named slots, we can use the slot attribute on a element in the parent:

emphasis mine

Am I barking up the wrong tree or is there a way to make this work using native VueJS features? I want to define the content of the slots in the child and the slot space in the parent.

Answer 1

I think what you're really looking for is named views, provided by VueRouter.

As an example:

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

And in the router code:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

new Vue({
    router,
  el: '#app'
})

I recognize that in ASP.NET that's not how you do it (in that the page directly renders the sections, rather than the router logic), but I think it's as close as you'll get in Vue.