Vue.js Passando Funções de Callback para Componentes

Funções de callback permitem a comunicação entre componentes pai e filho no Vue.js. Elas são passadas como props e podem ser chamadas pelo componente filho.

Considere o seguinte exemplo:

<!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">
        <h3>Value {{ count }}</h3>
        <counter :changefn="increase"></counter>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return { count: 0 }  
            },
            methods: {
                increase() {
                    this.count++;
                }
            }
        });

        app.component('counter', {
            props: ["changefn"],
            template: `<div><button v-on:click="changefn()">+</button></div>`
        });

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

Neste exemplo, o objeto Vue define um contador armazenado na variável count e um método increase() para incrementá-lo. Esse método não é chamado diretamente no componente pai, mas sim no componente filho counter.

A referência ao método increase é passada para o componente counter por meio da prop chamada changefn:

<counter :changefn="increase"></counter>

Dentro do componente counter, esse método é chamado ao clicar no botão:

<button v-on:click="changefn()">+</button>

Sempre que o botão for pressionado, o método do componente pai será acionado, aumentando o valor da variável count exibida na tela.

Exemplo de envio de funções para componentes em Vue.js

Passando Paramentros para Funções de Callback

Agora, veja um exemplo onde há uma lista de usuários, com a possibilidade de adicionar e remover itens:

<!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>Lista de Usuários</h2>
        <userform :addfn="add"></userform>
        <div>
            <useritem v-for="(user, index) in users"
                        :user="user"
                        :key="index"
                        :index="index"
                        :removefn="remove">
            </useritem>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    users: [
                        { name: 'Tom', age: 23 },
                        { name: 'Bob', age: 26 },
                    ]
                }  
            },
            methods: {
                remove(index) {
                    this.users.splice(index, 1);
                },
                add(user) {
                    this.users.push(user);
                }
            }
        });

        app.component('userform', {
            props: ["addfn"],
            data() {
                return {
                    user: { name: '', age: 18 }
                }
            },
            template: `<div>
                        <input type="text" v-model="user.name" />
                        <input type="number" v-model="user.age" />
                        <button v-on:click="addfn({name: user.name, age: user.age})">Adicionar</button>
                    </div>`
        });

        app.component('useritem', {
            props: ["user", "index", "removefn"],
            template: `<div>
                        <p>Nome: {{ user.name }} <br> Idade: {{ user.age }}</p>
                        <button v-on:click="removefn(index)">Remover</button>
                    </div>`
        });

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

O objeto Vue exibe uma lista de usuários na tela e define dois métodos: add para adicionar um novo usuário e remove para remover um item da lista.

O componente userform representa um formulário de entrada. O método add é passado como prop chamada addfn:

<userform :addfn="add"></userform>

Dentro do userform, a função addfn recebe os valores inseridos e aciona o método add do componente pai.

O componente useritem representa um item da lista. Ele recebe o método remove como prop chamada removefn. Ao clicar no botão de remoção, essa função é chamada, acionando o método remove do componente pai.

Esse padrão permite que os componentes filhos apenas chamem as funções definidas no componente pai, sem modificar diretamente os dados. Dessa forma, a lógica de manipulação da lista fica centralizada no componente pai, enquanto os filhos apenas disparam os eventos necessários.

Exemplo de envio de funções com parâmetros para componentes em Vue.js