Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Trabalhando com Slots

Na aula 04 Trabalhando com Slots é uma continuação de criação de um componente chamado "meu-painel" e o mesmo é importado dentro da tag script e dentro de Export Default é criado este componente. Como simplesmente alterando uma tag DIV para Slot o Vue.Js sabe que tem que exibir o conteúdo deste componente criado? Não ficou claro isto na aula e ja assisti mais de uma vez o mesmo vídeo.

      <meu-painel :titulo="foto.titulo">
        <img class="imagem-responsiva" :src="foto.url" :alt="foto.titulo">
      </meu-painel>  

<script>
  import Painel from './components/shared/painel/Painel.vue';

  export default {

    components: {
        'meu-painel' : Painel
    },

<template>
    <div class="painel">
      <h2 class="painel-titulo">{{ titulo }}</h2>
       <slot class="painel-conteudo">          
       </slot>
    </div>
</template>

<script>
  export default {

      props: ['titulo']

  }
</script>
1 resposta
solução!

Fala aí Alan, tudo bem? Isso é um recurso do próprio Vue, ele sabe que quando usamos o slot algo deve ser renderizado naquele pedaço.

Quando temos um slot sem nome, ele será o default, ou seja, aquele que não tem nome.

Mas, também podemos adicionar slot nomeado:

<div class="container">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

<base-layout>
    <template v-slot:header>
        <h1>Aqui pode estar um título da página</h1>
    </template>

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

    <template v-slot:footer>
        <p>Aqui estão algumas informações de contato</p>
    </template>
</base-layout>

Repare que o conteúdo do v-slot:header será no slot do header e o v-footer será no footer.

Espero ter ajudado.