Gostaria de saber como passar o valor de um componente com input para o seu pai. Por exemplo, o que a pessoa digitar no input do componente filho aparece em um h1 no componente pai.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Gostaria de saber como passar o valor de um componente com input para o seu pai. Por exemplo, o que a pessoa digitar no input do componente filho aparece em um h1 no componente pai.
Fala aí Thyago, tudo bem? Para realizar comunicação de filho par pai você pode usar o $emit.
Imagine o html do pai:
<template>
<div>
<p>Count: {{ quantidade }}</p>
<Filho></Filho>
</div>
</template>Agora, dentro do nosso Filho, vamos adicionar um botão para incrementar a quantidade:
<template>
<button type="button">Incrementar</button>
</template>Agora, como mandamos o evento para o pai? Primero, vamos adicionar um @click no botão:
<template>
<button @click="$emit('incrementar')" type="button">Increment</button>
</template>Veja que estamos disparando um evento que chama incrementar. Agora no pai, podemos ouví-lo através do v-on:NOME_EVENTO:
<Filho v-on:incrementar="adicionarQuantidade"></Filho>Dai, chamamos a função adicionarQuantidade existente no pai:
methods: {
adicionarQuantidade() {
this.quantidade++
}
}Espero ter ajudado.