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.
ATÉ 50% OFF
TÁ ACABANDO!
0 dias
0 horas
0 min
0 seg
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.