Dados e Métodos de Componentes no Vue.js

No Vue.js, os componentes podem armazenar dados internos por meio da propriedade data() e definir funcionalidades com methods. Esses conceitos são essenciais para criar componentes dinâmicos e interativos.

Propriedade data()

A função data() define os dados internos de um componente. No exemplo abaixo, o componente counter contém a propriedade header, que é utilizada no template para exibir um título:

<!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">
        <counter></counter>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('counter', {
            data() {
                return {
                    header: 'Counter Program'
                };
            },
            template: '<div><h2>{{ header }}</h2></div>'
        });
        app.mount('#app');
    </script>
</body>
</html>

Os dados do componente são definidos dentro da função data(), que retorna um objeto contendo suas propriedades. O Vue torna essas propriedades reativas, atualizando automaticamente a interface quando seu valor muda.

Exemplo de dados de componente em Vue.js

Esse conceito também se aplica a componentes registrados localmente. Em vez de serem registrados globalmente, são passados para a propriedade components dentro da configuração da aplicação:

Esse conceito também se aplica a componentes registrados localmente. Em vez de serem registrados globalmente, são passados para a propriedade components dentro da configuração da aplicação:

<div id="app">
    <counter></counter>
</div>
<script>
    const comp = {
        template: '<div><h2>{{ header }}</h2></div>',
        data() {
            return {
                header: 'Counter Program'
            };
        }
    };

    const app = Vue.createApp({
        components: {
            'counter': comp
        }
    });

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

Caso a aplicação e um componente definam uma propriedade com o mesmo nome, o componente sempre utilizará seu próprio valor, sem sobrescrever o da aplicação. No exemplo abaixo, tanto a aplicação quanto o componente counter definem a propriedade header com valores diferentes:

<!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>{{ header }}</h2>
        <counter></counter>
    </div>
    <script>
        const comp = {
            template: '<div><h3>{{ header }}</h3></div>',
            data() {
                return {
                    header: 'Component Header'
                };
            }
        };

        const app = Vue.createApp({
            data() {
                return {
                    header: 'App Header'
                };
            },
            components: {
                'counter': comp
            }
        });

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

Nesse caso, o componente counter exibirá o valor Component Header, enquanto a aplicação exibirá App Header.

Exemplo de dados de componente e de aplicação em Vue.js

Métodos

Além de armazenar dados internos, os componentes podem definir métodos na propriedade methods. Esses métodos funcionam da mesma forma que no objeto da aplicação Vue e podem ser acionados por eventos da interface.

<!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">
        <counter></counter>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('counter', {
            data() {
                return {
                    header: 'Counter Program',
                    count: 0
                };
            },
            template: `<div>
                <h2>{{ header }}</h2>
                <button v-on:click="increase">+</button>
                <span>{{ count }}</span>
            </div>`,
            methods: {
                increase() {
                    this.count++;
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

Quando o botão é clicado, o evento v-on:click chama o método increase, que incrementa a propriedade count. O Vue atualiza automaticamente a interface, refletindo a nova contagem na tela.