Registrando Componentes no Vue.js
No Vue.js, os componentes podem ser registrados de forma global ou local. Componentes registrados globalmente ficam disponíveis para qualquer outro componente dentro da aplicação, enquanto os componentes locais só podem ser utilizados dentro do escopo em que foram definidos. O funcionamento da comunicação entre componentes será abordado mais adiante, mas, por enquanto, veremos como os componentes podem ser registrados em uma aplicação Vue.
Registro Global
O registro global de componentes é feito por meio do método component()
<!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">
<component-a></component-a>
<component-b></component-b>
</div>
<script>
const app = Vue.createApp({});
app.component('component-a', {
template: '<h2>Component A</h2>'
});
app.component('component-b', {
template: '<h2>Component B</h2>'
});
app.mount('#app');
</script>
</body>
</html> Nesse exemplo, são criados dois componentes globais: component-acomponent-b
Registro Local
No registro local, os componentes são definidos como objetos JavaScript contendo as configurações necessárias. Para que um componente seja registrado localmente, ele deve ser passado para a propriedade components
<!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">
<component-a></component-a>
<component-b></component-b>
</div>
<script>
const ComponentA = {
template: '<h2>Component A</h2>'
};
const ComponentB = {
template: '<h2>Component B</h2>'
};
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
});
app.mount('#app');
</script>
</body>
</html> Cada componente é definido como um objeto que contém a configuração necessária. No exemplo, a única configuração presente é o template
const ComponentA = {
template: '<h2>Component A</h2>'
};
const ComponentB = {
template: '<h2>Component B</h2>'
}; Cada componente recebe um nome específico, como component-aComponentA<component-a>
Se um componente não for passado para a propriedade components
O resultado obtido com o registro local será o mesmo do exemplo anterior, que utilizava o registro global.