VueJs Named Slots
Using Named Slots
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.