De que maneira funciona o <slot></slot>
e scoped slots para receber descendência de outro componente e passar props
aos elementos descendentes?
Quando um componente possui slot(s), é possível injetar conteúdo nele a partir do componente pai, sem a necessidade de se utilizar props
. Por exemplo:
var MeuComponente = Vue.component('meu-componente', {
template: '<div class="meu-componente"><h1>{{ header }}</h1><slot></slot></div>',
data() { return { header: 'Isto vem de dentro' } }
});
new Vue({
el: '#app',
data: {
message: 'Isto vem de fora'
}
});
<script src="https://unpkg.com/vue"></script>
<div id="app">
<meu-componente>
{{ message }}
</meu-componente>
</div>
Repare que message
pertence ao componente de fora (a raiz/app do Vue, neste caso), enquanto o cabeçalho renderiza o valor de uma variável interna ao componente.
Como saber que conteúdo deve ir para que slot no caso de um componente ter vários?
Você pode usar múltiplos slots simplesmente dando um atributo name para cada, e passando o conteúdo numa tag HTML com atributo slot
apontando para aquele name. Na definição do componente fica assim, por exemplo:
<h1>{{ header }}</h1>
<slot name="abaixo-do-h1"></slot>
<h2>Outro header</h2>
<slot name="abaixo-do-h2"></slot>
No uso fica assim:
<meu-componente>
<div slot="abaixo-do-h1>Isto vai abaixo do h1</div>
<div slot="abaixo-do-h2>Isto vai abaixo do h2</div>
</meu-componente>
Um slot pode ter descendência inicial que é substituída por futura descendência caso haja sem ter de se usar um v-if ou v-show?
Sim! Se você não passar um conteúdo para determinado slot a partir do componente externo, o conteúdo do slot definido no componente interno será exibido. Funciona como um conteúdo default.