Não entendi como está funcionando a propriedade 'titulo' que está sendo usada em Painel.vue:
<template>
<div class="painel">
<h2 class="painel-titulo">{{ titulo }}</h2>
<div class="painel-conteudo">
</div>
</div>
</template>
<script>
export default {
/* Receber a propriedade titulo do componente App.vue: <meu-painel v-bind:titulo="foto.titulo"> .
Está sendo chamada no template, <h2> */
props: ['titulo']
}No curso o instrutor diz que ela está sendo importada de App.vue para ser usada no titulo
. Porém, se analisarmos o código, ela está sendo chamada dentro da função 'export default', ou seja, está sendo "exportada", e não importada. Portanto, não entendi quem está fornecendo a propriedade 'titulo' para quem: se Painel.vue está fornecendo para App.vue ou o inverso. Caso Painel.vue esteja importando a propriedade 'titulo' de App.vue, onde está a chamada de App.vue dentro de Painel.vue para que ele saiba que essa propriedade deve ser buscada/importada de dentro do componente App.vue?
App.vue:
<template>
//[...]
<ul class='lista-fotos'>
<li class="lista-fotos-item" v-for="foto of fotos">
<meu-painel v-bind:titulo="foto.titulo">
<img class="imagem-responsiva" v-bind:src="foto.url" v-bind:alt="foto.titulo">
</meu-painel>
</li>
</ul>
//[...]
</template>