Passando Arrays e Objetos para Componentes no Vue.js

No Vue.js, objetos e arrays podem ser passados para um componente por meio de props. Isso ajuda a estruturar melhor a aplicação, mantendo a lógica de dados separada da apresentação.

Enviando Objetos

A seguir, um exemplo onde um objeto é passado para um componente:

<!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">
      <input type="text" v-model="user.name" /><br /><br />
      <input type="number" v-model.number="user.age" /><br /><br />
      <user-info :user="user"></user-info>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            user: {
              name: "Tom",
              age: 18,
            },
          };
        },
      });

      app.component("user-info", {
        props: ["user"],
        template: `<div>
                        <h2>User</h2>
                        <p>Name: {{ user.name }}</p>
                        <p>Age: {{ user.age }}</p>
                    </div>`,
      });

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

O componente recebe os dados por meio da propriedade user, que contém um objeto com as propriedades name e age. No template do componente, essas propriedades podem ser acessadas diretamente.

Exemplo de como passar objeto para componente em Vue.js

Se nenhum valor for passado para a propriedade user (<user-info></user-info>), ela será undefined, resultando em um erro. Para evitar isso, é possível definir um valor padrão utilizando a opção default. No caso de objetos e arrays, essa opção deve ser uma função que retorna o valor inicial.

O código abaixo define um valor padrão para user:

app.component("user-info", {
  props: {
    user: {
      type: Object,
      default() {
        return {
          name: "Bob",
          age: 22,
        };
      },
    },
  },
  template: `<div>
                <h2>User</h2>
                <p>Name: {{ user.name }}</p>
                <p>Age: {{ user.age }}</p>
            </div>`,
});

Se user não for fornecido como props, o componente usará o valor padrão definido.

Enviando Arrays

O mesmo princípio se aplica a arrays. No exemplo a seguir, um array é passado para um componente:

<!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">
      <users-list :users="users"></users-list>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            users: [
              { name: "Tom", age: 18 },
              { name: "Bob", age: 23 },
              { name: "Alice", age: 21 },
            ],
          };
        },
      });

      app.component("users-list", {
        props: ["users"],
        template: `<ul>
                        <li v-for="user in users">
                            <p>Name: {{ user.name }}</p>
                            <p>Age: {{ user.age }}</p>
                        </li>
                    </ul>`,
      });

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

O componente recebe um array users, onde cada elemento é um objeto. A diretiva v-for permite iterar sobre o array para exibir os dados.

Exemplo de como passar array de objetos para componente em Vue.js

Também é possível definir um valor padrão para users, garantindo que o componente funcione corretamente caso não receba um array:

app.component("users-list", {
  props: {
    users: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  template: `<ul>
                <li v-for="user in users">
                    <p>Name: {{ user.name }}</p>
                    <p>Age: {{ user.age }}</p>
                </li>
            </ul>`,
});

Caso users não seja passado como props, o componente usará um array vazio por padrão, evitando erros.

Documentação oficial:

Propriedades