Example
Named slots work similarly to single slots but instead allow you to distribute content to different regions within your child component template.
Take the page component from the previous example but modify it's template so it is as follows:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
When using the page component we can now determine where content is placed via the slot attribute:
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
The resulting page will be:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
If a slot is defined without a name attribute then any content which is placed within component tags not specifying a slot attribute will be placed into that slot.
See the multi insertion example on the Vue.js official docs.
