Vue.js Componentes Pai e Filho

No Vue.js, um componente pode conter outros componentes internos. O componente pai organiza e gerencia os componentes filhos, permitindo uma melhor separação da lógica e da estrutura da aplicação.

A seguir, um exemplo onde um componente exibe uma lista de objetos, enquanto outro componente é responsável por exibir cada item individualmente:

<!DOCTYPE html>
<html>
<head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
    <style>
        .userdetails {
            border-bottom: 1px solid #888;
        }
    </style>
</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('user-details', {
            props: ["user"],
            template: `<div class="userdetails">
                        <p>Name: {{ user.name }}</p>
                        <p>Age: {{ user.age }}</p>
                    </div>`
        });

        app.component('users-list', {
            props: ["users"],
            template: `<div>
                        <user-details v-for="user in users" :key="user.name" :user="user"></user-details>
                    </div>`
        });

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

O componente users-list recebe um array de objetos users. Para exibir cada item individualmente, ele utiliza o componente user-details. A diretiva v-for percorre a lista e passa cada objeto user para user-details.

Embora fosse possível definir toda a lógica dentro de um único componente, separar user-details como um componente independente permite maior flexibilidade. Se for necessário modificar a estrutura do HTML, basta alterar user-details sem impactar users-list. Além disso, esse componente pode ser reutilizado em outras partes da aplicação.

Registro Global e Local de Componentes

No exemplo anterior, os componentes foram registrados globalmente por meio do método app.component(). Isso significa que user-details pode ser utilizado em qualquer outro componente dentro da aplicação Vue.

Também é possível registrar um componente localmente. No exemplo abaixo, user-details é definido dentro de uma constante e registrado apenas no escopo da aplicação Vue:

const userDetailsComponent = {
    props: ["user"],
    template: `<div class="userdetails">
                    <p>Name: {{ user.name }}</p>
                    <p>Age: {{ user.age }}</p>
                </div>`
};

const app = Vue.createApp({
    data() {
        return { 
            users: [
                { name: 'Tom', age: 18 },
                { name: 'Bob', age: 23 },
                { name: 'Alice', age: 21 }
            ]
        };
    },
    components: {
        'user-details': userDetailsComponent
    }
});

Nesse caso, user-details fica acessível dentro da instância do Vue, mas não pode ser usado diretamente em outros componentes. Se users-list tentar utilizá-lo, ocorrerá um erro informando que o componente não foi encontrado.

Uma alternativa é registrar user-details como um componente local dentro de users-list, tornando-o disponível apenas dentro desse componente:

O objeto components dentro de users-list recebe userDetailsComponent, associando-o ao nome "user-details". Isso permite que user-details seja utilizado dentro de users-list sem estar disponível globalmente para outros componentes.