How to create more complex slots in Vue
Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at named and scoped slots.
Named Slots
Sometimes we want to have multiple slots. To distinguish them, then we have to name them.
We can define a component with named slots with the name
attribute as follows:
Vue.component("layout", {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});
Then we can use the component above together as follows:
src/index.js
:
Vue.component("layout", {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});new Vue({
el: "#app"
});
index.html
:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">…