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.
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.