[Vue @Component] Place Content in Components with Vue Slots

Posted 2020-12-24 answer1215

Vue‘s slots enable you to define where content of a component should land when you define the content inside of a parent component. You can also name slots to arrange the elements however you‘d like and allow your component to build it‘s own content around the content that will be placed.

 

main.js:

import Vue from ‘vue‘
import App from ‘./App.vue‘


new Vue({
  render: (h) => (
    <App>
    <h1 slot="header">This is header</h1>  
    <h2 slot="footer">This is footer</h2>  
  </App>
  )
}).$mount(‘#app‘)

 

App.vue:

<template>
  <section class="section">
      <slot name=‘header‘></slot>

     <hello-world message="Message from APP"></hello-world>
  
     <slot name=‘footer‘></slot>
  </section>
</template>