OverVue.dev

# Slots

# Default Slot

Using slots, the "JS" goes in the parent, the "CSS" goes in the child.

# Input Parent:




 
 
 
 







 





<template>
  <div>
    <h3>Fact</h3>
    <MyChildSlot>
      <h3>{{ title }}</h3>
      <p>Bears, beets, battlestar Galactica</p>
    </MyChildSlot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Sloth are cute'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Input Child:



 




 
 
 
 


<template>
  <div class="child">
    <slot></slot>
  </div>
</template>

<style scoped>
h3 {
  /*the css styling is of the slot should be in the child */
  color: #f09;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# Output:

Fact

Sloth are cute

Bears, beets, battlestar Galactica

# Named Slots

To use several slots, use "named" slots. You can also combine default and named slots.

# Input Parent:




 
 
 
 







 






<template>
  <base-layout>
    <template v-slot:quiz>
      <h1>Question</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </base-layout>
</template>

<script>
export default {
  data() {
    return {
      title: 'Sloth are cute'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Input Child:



 




 
 
 
 


<template>
  <div>
    <slot>Title</slotyarn docs:dev>
  </div>
</template>

<style scoped>
h3 {
  /*the css styling is of the slot should be in the child */
  color: #f09;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# Output:

A paragraph for the main content.

And another one.
# See the official Vue.js doc

← Vuex →