Comunicação entre Componentes Irmãos no Vue.js

Essa comunicação não ocorre diretamente, mas sim por meio do componente pai. No exemplo a seguir, dois componentes filhos interagem entre si por meio do componente pai.

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <h2>User</h2>
      <useredit :name="user" @userchange="change"></useredit>
      <userinfo :name="user" @userreset="reset"></userinfo>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            user: "Tom",
          };
        },
        methods: {
          change(name) {
            this.user = name;
          },
          reset() {
            this.user = "Tom";
          },
        },
      });

      app.component("useredit", {
        props: ["name"],
        template: `<div>
                        <input v-model="username" />
                        <button @click="save">Save</button>
                      </div>`,
        data() {
          return { username: this.name };
        },
        watch: {
          name(newVal) {
            this.username = newVal;
          },
        },
        methods: {
          save() {
            this.$emit("userchange", this.username);
          },
        },
      });

      app.component("userinfo", {
        props: ["name"],
        template: `<div>
                        <p>Nome: {{ name }}</p>
                        <button @click="reset">Reset</button>
                      </div>`,
        methods: {
          reset() {
            this.$emit("userreset");
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

O ponto-chave desse exemplo é que os dados manipulados pelos dois componentes filhos são armazenados no estado global do componente pai. Ambos os componentes, useredit e userinfo, recebem o nome do usuário diretamente do componente pai, garantindo que compartilhem os mesmos dados sem se comunicar diretamente entre si.

O primeiro componente filho, useredit, recebe o nome do usuário como prop :

props: ["name"],

Porém, props são somente leitura dentro do componente. Como useredit precisa modificar esse nome e enviar o valor atualizado para outro componente, ele define uma propriedade interna username:

data() {
    return { username: this.name }
},

Essa propriedade é vinculada ao campo de entrada no template:

<input v-model="username" /><button @click="save">Save</button>

Ao clicar no botão de salvar, o método save é chamado e emite o evento userchange:

methods: {
    save() {
        this.$emit("userchange", this.username);
    }
}

O componente pai escuta esse evento e atualiza a variável user:

methods: {
    change(name) {
        this.user = name;
    }
}

Isso garante que qualquer alteração feita em useredit seja refletida automaticamente em userinfo.

Para garantir que useredit também atualize username caso o nome do usuário seja alterado por outro componente, um watcher é definido:

watch: {
    name(newVal) {
        this.username = newVal;
    }
}

Sempre que name mudar externamente, username será atualizado.

O segundo componente filho, userinfo, também recebe name como prop:

props: ["name"];

Diferente de useredit, ele não altera diretamente esse valor. Em vez disso, ao pressionar o botão de reset, emite o evento userreset:

methods: {
    reset() {
        this.$emit("userreset");
    }
}

O componente pai escuta esse evento e redefine o nome do usuário para o valor original:

methods: {
    reset() {
        this.user = 'Tom';
    }
}

Neste exemplo, o componente pai atua como mediador da comunicação entre useredit e userinfo. Os componentes irmãos não interagem diretamente, mas se comunicam de forma indireta por meio da atualização do estado do pai.

Essa abordagem mantém os componentes filhos desacoplados, tornando o código mais modular e fácil de manter.

Exemplo de comunicação entre componentes irmãos no Vue.js

Documentação:

Fundamentos dos Componentes