VueJS Components Slots

by Plínio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

  <div>
    <h1>Eu sou o título do pai</h1>
    <my-component>
      <p>Este é um conteúdo original</p>
      <p>Este é mais um conteúdo original</p>
    </my-component>
  </div>
  
  <app-layout>
    <h1 slot="header">Aqui pode ser um título da página</h1>

    <p>Um parágrafo para o conteúdo principal.</p>
    <p>E aqui outro.</p>

    <p slot="footer">Aqui vai alguma informação de contato</p>
  </app-layout>
  
  <udemy-comp></udemy-comp>
  
</div>

JavaScript

Vue.component('my-component', {
	template: `
  	<div>
      <h2>Eu sou o título do filho</h2>
      <slot>
        Isto só será exibido se não há conteúdo a ser distribuído.
      </slot>
    </div>
  `
});

Vue.component('UdemyComp', {
	template: `<p>Udemy</p>`
});

Vue.component('app-layout', {
	template: `
  	<div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
      <UdemyComp/>
    </div>
  `
});

new Vue({
	el: '#app'
});