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

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