The property $slots is used to programmatically access content distributed by slots. Each named slot has its own corresponding property which is specified after colon sign using v-slot. The default property contains either nodes not included in a named slot or contents of v-slot:default.
1 <template>
2 <div>
3 <div>
4 <slot name="header" />
5 </div>
6 This is child component
7 <div>
8 <slot name="footer" />
9 </div>
10 </div>
11 </template>
12 <script>
13 export default {
14 name: "ChildView",
15
16 mounted: function () {
17 console.log(this.$slots);
18 },
19 };
20 </script>
21
In the above example, a component is define with two options name and mounted. A mounted option access the component instance using this keyword. A component template define with two slots elements with name, it allows to map specified slot based on named v-slot directive.
A mounted option access the instance property $slots that returns specified elements with v-slot directive with name. It returns an object that includes named slot with elements and prints on console.
1 {
2 footer: ƒ renderFnWithContext(),
3 { name: "renderFnWithContext" }
4 header: ƒ renderFnWithContext(),
5 { name: "renderFnWithContext" }
6 }
Import and added component with slot template with v-slot directive
Import and added component with slot template with v-slot directive
1 <template>
2 <div>
3 < HelloWorld>
4
5 <template v-slot:footer> Component footer </template>
6 <template v-slot:header> Component header </template>
7 </HelloWorld>
8 </div>
9 </template>
10
11 <script>
12 import HelloWorld from "@/components/HelloWorld.vue";
13
14 export default {
15 name: "ParentView",
16 components: {
17 HelloWorld,
18 },
19 };
20 </script>
In the above example, a component is imported and added into the component template by specifying a two slot template elements. A name of the slot is specified separated using colon (:) sign. When slot specified with name order does not matter, it maps with in the child component based on name.
Related options for your search