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.

Documentação oficial:

Reactivity Fundamentals