You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/component-registration.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Registro de Componentes
2
2
3
-
> Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia ela primeiro se você for novo no assunto de componentização.
3
+
> Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia lá primeiro se você for novo no assunto de componentização.
O nome do componente é o primeiro argumento de `app.component`. No exemplo acima, o nome do componente é "my-component-name".
18
18
19
-
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 um template string ou [componente de arquivo único](../guide/single-file-component.html)), recomendamos seguir as [regras do W3C](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) para nomes de tags personalizadas:
19
+
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](../guide/single-file-component.html)), recomendamos seguir as [regras do W3C](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) para nomes de tags personalizadas:
20
20
21
-
1. Todas as letras minúsculas; e
22
-
2.Contém hífen (ou seja, tem várias palavras conectadas com o símbolo de hífen).
21
+
1. Todas as letras minúsculas;
22
+
2.Conter hífen (ou seja, ter várias palavras conectadas com o símbolo de hífen).
23
23
24
24
Ao nomear dessa maneira, isso o ajudará a evitar conflitos com elementos HTML atuais e futuros.
25
25
26
26
Você pode ver outras recomendações para nomes de componentes no [Guia de Estilo](../style-guide/#base-component-names-strongly-recommended).
27
27
28
-
### Nomeação
28
+
### Padrão de Nomeação
29
29
30
-
Ao definir componentes em um template string ou um componente de arquivo único, você tem duas opções ao definir os nomes dos componentes:
30
+
Ao definir componentes em um template string ou um componente single file, você tem duas opções ao definir os nomes dos componentes:
Ao definir um componente com PascalCase, você pode usar qualquer um dos casos ao fazer referência a seu elemento personalizado. Isso significa que `<my-component-name>` e `<MyComponent-name>` 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).
50
+
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).
51
51
52
52
## Registro Global
53
53
@@ -89,7 +89,7 @@ Isso se aplica até mesmo a todos os subcomponentes, o que significa que estes t
89
89
90
90
## Registro Local
91
91
92
-
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 em seu executável final. Isso aumenta desnecessariamente a quantidade de código JavaScript que seus usuários precisam fazer download.
92
+
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.
93
93
94
94
Nesses casos, você pode definir seus componentes como objetos JavaScript simples:
95
95
@@ -105,7 +105,7 @@ const ComponentC = {
105
105
}
106
106
```
107
107
108
-
Em seguida, defina os componentes que deseja usar na opção de `components`:
108
+
Em seguida, defina os componentes que deseja usar na opção `components`:
109
109
110
110
```js
111
111
constapp=Vue.createApp({
@@ -146,7 +146,7 @@ export default {
146
146
}
147
147
```
148
148
149
-
Observe que em 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:
149
+
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:
150
150
151
151
- o nome do elemento personalizado para usar no modelo, quanto
152
152
- o nome da variável que contém as opções do componente.
0 commit comments