Componentes Pai e Filho no Vue.js
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.
Documentação oficial: