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) do objeto da aplicação Vue é utilizado. O primeiro parâmetro representa o nome do componente e o segundo define suas opções, que incluem dados e comportamento.

<!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> exista nativamente no HTML. O Vue renderiza o conteúdo do componente no local onde esse elemento foi declarado. Além disso, um componente não pode substituir diretamente elementos HTML nativos como <div> ou <h2>.

No JavaScript, o objeto da aplicação Vue é criado com Vue.createApp({}). Nenhum parâmetro é passado nesse exemplo, mas a aplicação pode conter dados, métodos e outras propriedades conforme necessário.

Após a criação da aplicação, o método component() registra o componente:

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 contém a estrutura HTML que será renderizada no lugar do elemento <hello></hello>.

Durante a renderização, o Vue substitui cada ocorrência do elemento <hello> pelo conteúdo definido no template. Como o componente foi registrado na aplicação Vue, ele pode ser reutilizado quantas vezes for necessário dentro do escopo gerenciado pelo Vue.

Exemplo de renderização de componentes

Nomeando Componentes

Há duas formas de nomear componentes no Vue: kebab-case e PascalCase.

Convenção de nomenclatura

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:

<!-- Válido apenas em templates Vue -->
<MyComponentName></MyComponentName>

<!-- Válido tanto no DOM quanto em templates Vue -->
<my-component-name></my-component-name>

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, não funcionaria:

<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.

Documentação oficial:

Fundamentos dos Componentes