Criando Componentes no Vue.js
No Vue.js, componentes são elementos nomeados que encapsulam código e comportamento, permitindo reutilização em diferentes partes da aplicação. O framework associa um comportamento específico a esses componentes, tornando-os blocos fundamentais para a construção de interfaces modulares.
Para definir um componente, o método component(nome, opções)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aprendendo Vue.js</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<hello></hello>
<hello></hello>
</div>
<script>
const app = Vue.createApp({});
app.component('hello', {
template: '<h2>Hello</h2>'
});
app.mount('#app');
</script>
</body>
</html> O componente hello foi definido sem que o elemento <hello><div><h2>
No JavaScript, o objeto da aplicação Vue é criado com Vue.createApp({})
Após a criação da aplicação, o método component()
app.component('hello', { template: '<h2>Hello</h2>' }); O primeiro argumento define o nome do componente, enquanto o segundo especifica suas opções. A propriedade template<hello></hello>
Durante a renderização, o Vue substitui cada ocorrência do elemento <hello>template
Nomeando Componentes
Há duas formas de nomear componentes no Vue: kebab-case e PascalCase.
Se um componente for registrado com kebab-case, por exemplo:
Vue.component('my-component-name', { /* ... */ })Ele deve ser referenciado no DOM e em templates Vue como:
<my-component-name></my-component-name>Se um componente for registrado com PascalCase, por exemplo:
Vue.component('MyComponentName', { /* ... */ })Ele pode ser referenciado nos templates Vue de duas formas:
<MyComponentName></MyComponentName> <!-- Válido apenas em templates Vue -->
<my-component-name></my-component-name> <!-- Válido tanto no DOM quanto em templates Vue -->No entanto, quando utilizado diretamente no DOM (fora de templates baseados em strings), apenas a notação kebab-case é válida, pois navegadores não reconhecem elementos com letras maiúsculas no HTML.
Um detalhe importante é que os componentes só podem ser utilizados dentro da árvore DOM controlada pelo Vue. O exemplo abaixo, onde o componente é usado fora do #app
<hello></hello>
<div id="app"></div>Isso acontece porque o Vue só gerencia elementos dentro do container onde foi montado, garantindo controle total sobre a renderização e o comportamento dos componentes.