Introdução aos Tipos de Componentes

Antes de iniciar é necessário que você saiba quais são os principais tipos de componentes do Vue.js, para posteriormente descobrir como eles devem se comunicar.

O primeiro tipo é "UI Components" (Componentes de Interface de usuário) e normalmente é usado para botões, inputs, dialogs, etc. O Vuetify, por exemplo, é um Framework que disponibiliza vários "UI Components".

O segundo tipo é "Layout Components" e normalmente é usado para organizar os layouts do seu aplicativo. Por exemplo, existem elementos que envolvem o conteúdo de uma página, como cabeçalho, menus laterais e rodapé. Algumas páginas podem compartilhar os mesmos cabeçalhos/menus/rodapés, porém outras páginas podem possuir cabeçalhos/menus/rodapés diferentes.

Ou seja, neste caso cada tipo de layout é um componente e dentro deste layout são carregados outros componentes.

O terceiro tipo de componente é "Views" (também chamado de "Pages") e neste caso representa os conteúdos carregados dentro de um "Layout Component". Para colocar isso em prática, veja as Nested Routes do Vue-Router.

O quarto tipo de componente é "Partial View" e é um conceito bem comum para programadores Ruby on Rails. Basicamente é quando você tem uma tela muito grande que precisa ser dividida em várias partes menores. Dependendo da situação, essa parte menor pode ou não ser usada em outro contexto.

Isso é uma convenção não oficial do Vue.js, mas que é amplamente adotada.

Três maneiras para compartilhar dados entre componentes

A comunicação e o compartilhamento de dados entre componentes do Vue.js é algo se torna comum conforme sua aplicação cresce. Existem várias maneiras para fazer isso, mas vou destacar as três formas mais populares e que são consideradas como boas práticas.

1) Propriedades, slots e eventos

Com as propriedades e slots é possível passar parâmetros do componente pai para o componente filho. Já por meio dos eventos é possível estabelecer uma comunicação do componente filho para o componente pai.

Essa é a maneira mais simples e básica para compartilhar dados e por isso é muito usada por UI Components. Se você quer mais detalhes sobre isso, separei alguns links de ajuda:

• Básico sobre componentes
• Propriedades
• Eventos
• Slots
• Tutorial

2) Arquitetura Flux com Vuex

A segunda maneira é por meio da biblioteca Vuex que segue as diretrizes da arquitetura Flux. Basicamente a ideia é que os dados fiquem centralizados em uma Store e somente seja alterados por métodos autorizados, aqui chamados de Mutations e Actions.

A arquitetura Flux funciona muito bem quando existem muitos componentes precisando acessar e alterar os mesmos dados, uma vez que todas as alteração de dados são centralizadas e enfileiradas. A arquitetura Flux não é algo exclusivo do Vue.js e pode ser aplicado em várias situações que necessitam de uma comunicação unidirecional. Se você deseja conhecer mais detalhes sobre este modelo clique aqui.

Desta forma, o Vuex normalmente é usado para compartilhar dados entre Views e Layout Components. Vale destacar que a biblioteca é bem flexível e facilmente você pode adaptá-la para diversas situações. Se você deseja conhecer mais detalhes sobre o Vuex clique aqui.

3) Vue.observable

O Vue.observable é algo recente e foi disponibilizado somente na versão 2.6 do Vue.js. Seu objetivo é extremamente simples: Criar um objeto reativo que você pode usar onde quiser.

Segundo a sua documentação:

• Pode ser usado dentro de Render Functions ou Computed Properties.
• Para cenários simples de comunicação entre componentes.

Como o Vue.observable gera um objeto reativo, a cada alteração todas as suas dependências são atualizadas. Ou seja, ele se torna muito útil quando é necessário compartilhar dados entre componentes dos tipos View e Partial View.

A diferença entre Vuex e Vue.observable

No Vuex toda alteração de estado precisa passar por uma Mutation (ou Action se for assíncrona). Porém no Vue.observable é alterado diretamente o objeto reativo.

Desta forma, segue algumas recomendações sobre quando usar cada um:

• Cenários
  • Use Vuex para compartilhar dados que podem ser alterados em muitos componentes (cenários complexos).
  • Use Vue.observable para compartilhar dados que podem ser alterados em poucos lugares (cenário simples).
• Estrutura de dados estática ou dinâmica
  • Com Vuex, prefira uma estrutura de dados estática (ver recomendação na documentação oficial).
  • Caso seja necessário uma estrutura de dados dinâmica, Vue.observable funciona muito bem.
• Formulários
  • Para utilizar o Vuex dentro de um formulário, siga as instruções da documentação oficial ou use a biblioteca Vuex-Map-Fields.
  • Os objetos reativos do Vue.observable podem facilmente ser usados em formulários.

Agora é só analisar a sua situação e decidir qual é a melhor alternativa.

Dúvidas ou sugestões é só entrar em contato. Abraço.