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

Como passar dados de um componente filho para o pai

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.

1 resposta
solução!

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.