Vue.js

# Registro de Componentes

Saiba como funciona o registro de componentes com uma aula gratuita no Vue School

Esta página assume que você já leu o Básico sobre Componentes. Leia lá primeiro se você for novo no assunto de componentização.

# Nomes de Componentes

Ao registrar um componente, ele sempre receberá um nome. Por exemplo, no registro global que vimos até agora:

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})
1
2
3
4
5

O nome do componente é o primeiro argumento de app.component. No exemplo acima, o nome do componente é "my-component-name".

O nome que você dá a um componente pode depender de onde você pretende usá-lo. Ao usar um componente diretamente no DOM (ao contrário de em um template string ou componente single file), recomendamos seguir as regras do W3C (opens new window) para nomes de tags personalizadas:

  1. Todas as letras minúsculas;
  2. Conter hífen (ou seja, ter várias palavras conectadas com o símbolo de hífen).

Ao nomear dessa maneira, isso o ajudará a evitar conflitos com elementos HTML atuais e futuros.

Você pode ver outras recomendações para nomes de componentes no Guia de Estilo.

# Padrão de Nomeação

Ao definir componentes em um template string ou um componente single-file, você tem duas formas de nomeá-los:

# Com kebab-case

app.component('my-component-name', {
  /* ... */
})
1
2
3

Ao definir um componente com kebab-case, você também deve usar kebab-case ao fazer referência a seu elemento personalizado, como em <my-component-name>.

# Com PascalCase

app.component('MyComponentName', {
  /* ... */
})
1
2
3

Ao definir um componente com PascalCase, você pode usar qualquer um dos padrões ao fazer referência a seu elemento personalizado. Isso significa que ambos<my-component-name> e <MyComponentName> são aceitáveis. Observe, no entanto, que apenas os nomes kebab-case são válidos diretamente no DOM (ou seja, templates não-string).

# Registro Global

Até agora, só criamos componentes usando app.component:

Vue.createApp({...}).component('my-component-name', {
  // ... opções ...
})
1
2
3

Esses componentes são globalmente registrados para a aplicação. Isso significa que eles podem ser usados no template de qualquer instância de componente nesta aplicação:

const app = Vue.createApp({})

app.component('component-a', {
  /* ... */
})
app.component('component-b', {
  /* ... */
})
app.component('component-c', {
  /* ... */
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>
1
2
3
4
5

Isso se aplica até mesmo a todos os subcomponentes, o que significa que estes três componentes também estarão disponíveis dentro uns dos outros.

# Registro Local

O registro global geralmente não é o ideal. Por exemplo, se você estiver usando um sistema de empacotador de módulos como o Webpack, registrar globalmente todos os componentes significa que, mesmo se você parar de usar um componente, ele ainda poderá ser incluído na sua distribuição final. Isso aumenta desnecessariamente a quantidade de código JavaScript que seus usuários precisam baixar.

Nesses casos, você pode definir seus componentes como objetos JavaScript simples:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}
1
2
3
4
5
6
7
8
9

Em seguida, defina os componentes que deseja usar na opção components:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
1
2
3
4
5
6

Para cada propriedade no objeto components, a chave será o nome do elemento personalizado, enquanto o valor conterá o objeto de opções para o componente.

Observe que componentes registrados localmente não estão disponíveis em subcomponentes. Por exemplo, se você quiser que ComponentA esteja disponível em ComponentB, você terá que usar:

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10

Ou se você estiver usando módulos ES2015, como por meio de Babel e Webpack, isso pode se parecer mais com:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}
1
2
3
4
5
6
7
8

Observe que na ES2015+, colocar um nome de variável como ComponentA dentro de um objeto é uma abreviação de ComponentA: ComponentA, o que significa que o nome da variável é tanto:

  • o nome do elemento personalizado para usar no modelo, quanto
  • o nome da variável que contém as opções do componente.

# Sistemas de Módulo

Se você não estiver usando um sistema de módulo com import/require, você provavelmente pode pular esta seção por enquanto. Se estiver, temos algumas instruções e dicas especiais para você.

# Registro Local em um Sistema de Módulo

Se você ainda está aqui, é provável que esteja usando um sistema de módulo, como o Babel e o Webpack. Nestes casos, recomendamos a criação de um diretório components, com cada componente em seu próprio arquivo.

Em seguida, você precisará importar cada componente que deseja usar, antes de registrá-lo localmente. Por exemplo, em um hipotético arquivo ComponentB.js ou ComponentB.vue:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10

Agora, tanto ComponentA quanto ComponentC podem ser usados dentro do template de ComponentB.

← Propriedades →