Props no Button | Vue3: explorando o framework

Props no Button

Ficou confuso o uso da props no componente do Button no desafio.

Eu tinha entendido que a props serve para pegar propriedades do componente pai como foi no componente de cronometro. Mas nesse componente do Button ele tem uma props e tudo que tem lá dentro da props é criado no próprio componente e não herdado. Inclusive quando ele é chamado no temporizador e passado as propriedades da props que foi criado no componente do Button. A props então tem uma função de mandar as propriedades criadas pro componente pai ?

Outra questão é o uso do "v-bind ou :" que é mostrado a seguir: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Quando queremos passar só um texto como é no caso da propriedade "texto" e "icone" não é necessário o uso dos ":" ??

Salve, Lucas! Excelentes perguntas.

Props são atributos customizados que registramos nos nossos componentes. A passagem de props é sempre de Pai para Filho.

Quando queremos fazer a comunicação de algum evento de Filho para Pai, usamos o emits, indicando que aquele componente emite algum evento quando algo acontece. Por exemplo, o evento de clique.

Sobre o v-bind, ele só é necessário quando queremos fazer o bind de uma variável com uma prop. Se for um valor estático, como por exemplo o texto do botão, não precisamos disso. Mas se for um valor computado, como por exemplo o cronometroRodando, utilizamos o : para linkar o valor da prop com o estado do componente.