Geovani Assis

No desenvolvimento com Vue.js, é comum precisar compartilhar dados entre componentes. Saber como fazer isso de forma eficiente é essencial para criar aplicações dinâmicas e organizadas. Vamos entender como passar variáveis do componente pai para o filho e vice-versa!

1. Passando dados do Pai para o Filho usando props

O método mais comum de compartilhar dados é usando props.

Exemplo:
No componente pai, você define um dado:

<!-- Componente Pai -->
<template>
  <div>
    <Picture :fotoUsuario="foto" :nomeUsuario="nome" />
  </div>
</template>

<script>
import Picture from './Picture.vue';

export default {
  name: 'ParentComponent',
  components: { Picture },
  data() {
    return {
      foto: '/img/user_001.png',
      nome: 'Geovani Assis'
    };
  }
};
</script>

No componente filho, você recebe as variáveis como props:

<!-- Componente Filho -->
<template>
  <div>
    <img :src="fotoUsuario" :alt="nomeUsuario" />
  </div>
</template>

<script>
export default {
  name: 'Picture',
  props: {
    fotoUsuario: String,
    nomeUsuario: String
  }
};
</script>

2. Passando dados do Filho para o Pai usando emit

Para enviar dados de um componente filho para o pai, utilizamos o método $emit.

Exemplo:
No componente filho:

<template>
  <button @click="enviarDados">Enviar Dados</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    enviarDados() {
      this.$emit('dadosEnviados', 'Mensagem do filho');
    }
  }
};
</script>

No componente pai, você escuta o evento e manipula os dados:

<template>
  <div>
    <ChildComponent @dadosEnviados="receberDados" />
    <p>{{ mensagem }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      mensagem: ''
    };
  },
  methods: {
    receberDados(mensagem) {
      this.mensagem = mensagem;
    }
  }
};
</script>

3. Usando um Armazenamento Global (Vuex ou Pinia)

Quando você precisa compartilhar dados entre múltiplos componentes sem relação direta, considere usar um estado global como Vuex ou Pinia.

Conclusão

O Vue.js oferece várias formas de passar variáveis entre componentes, cada uma ideal para diferentes situações. Usar props e $emit é perfeito para comunicação direta entre pai e filho. Para casos mais complexos, uma abordagem com armazenamento global pode ser a melhor escolha.

Gostou do conteúdo? Explore mais dicas e tutoriais no meu Blog e siga-me nas redes sociais para mais insights sobre desenvolvimento web!