Components são um conceito crucial no Vue.js que permite que você crie aplicativos da Web estruturados e sustentáveis. Com components, você pode dividir seu aplicativo em partes pequenas e independentes, cada uma responsável por uma parte específica da interface do usuário.
Neste artigo, exploraremos como criar components em Vue.js, usá-los para reutilizar código e passar dados entre arquivos components. Vamos nos aprofundar no uso props para passar dados de um componente pai para um componente filho e no uso de eventos para passar dados de um componente filho de volta para seu componente pai.
1. Criando Components
Components em Vue.js pode ser criado usando o método `Vue.component` ou definindo arquivo único components.
Exemplo:
// Global Component using Vue.component
Vue.component('my-component', {
// Component options
});
// Local Component using single-file component
// MyComponent.vue
<template>
<!-- Component template -->
</template>
<script>
export default {
// Component options
};
</script>
2. Estrutura do Componente
Um componente Vue consiste em um modelo, script e estilos opcionais. O modelo contém a marcação HTML, o script contém as opções do componente(dados, métodos, propriedades calculadas, ganchos de ciclo de vida) e os estilos definem a aparência do componente.
Exemplo:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style scoped>
/* Component styles */
</style>
3. Reutilização de componentes
Components no Vue.js pode ser reutilizado em seu aplicativo, reduzindo a duplicação de código e melhorando a capacidade de manutenção. Eles promovem uma abordagem modular, permitindo que você componha menores components em maiores.
Exemplo:
// ParentComponent.vue
<template>
<div>
<child-component></child-component>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
4. Props
Props permitem que você passe dados de pai components para filho components. Props são declarados no componente filho e podem ser usados como propriedades de dados regulares.
Exemplo:
// ParentComponent.vue
<template>
<div>
<child-component:message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
5. Eventos Personalizados
Components podem emitir eventos personalizados para se comunicar com seus pais components. Os pais components podem ouvir esses eventos e reagir de acordo.
Exemplo:
// ChildComponent.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$emit('increment-event');
}
}
};
</script>
// ParentComponent.vue
<template>
<div>
<child-component @increment-event="handleIncrement"></child-component>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
},
methods: {
handleIncrement() {
this.count++;
}
}
};
</script>
Esses exemplos mostram os principais conceitos do Vue.js components, demonstrando sua flexibilidade, capacidade de reutilização e recursos de comunicação. Components ajudam a criar código modular e sustentável, tornando o Vue.js uma estrutura poderosa para a construção de aplicativos escaláveis.