Vue.js Passando Arrays e Objetos para Componentes

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.