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
O suporte a [funcionalidade inline-template](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) foi removido.
10
+
O suporte ao [recurso _inline-template_](https://br.vuejs.org/v2/guide/components-edge-cases.html#Templates-Inline) foi removido.
11
11
12
-
## Sintaxe 2.x
12
+
## Sintaxe v2.x
13
13
14
-
Na versão 2.x, o Vue disponibilizava o atributo `inline-template` em componentes filhos para usar seu conteúdo interno como *template* ao invés de o tratar como conteúdo distribuído.
14
+
Na versão 2.x, o Vue disponibilizava o atributo `inline-template` em componentes filhos para usar seu conteúdo interno como _template_ ao invés de o tratar como conteúdo distribuído.
15
15
16
16
```html
17
17
<my-componentinline-template>
18
18
<div>
19
19
<p>Estes são compilados como template do próprio componente.</p>
20
-
<p>Não como conteúdo da transclusão dos pais.</p>
20
+
<p>Não como conteúdo da transclusão do componente pai.</p>
21
21
</div>
22
22
</my-component>
23
23
```
24
24
25
-
## Sintaxe 3.x
25
+
## Sintaxe v3.x
26
26
27
27
Esta funcionalidade não receberá mais suporte.
28
28
29
29
## Estratégia de Migração
30
30
31
-
A maioria dos casos de uso de `inline-template` assume uma configuração sem ferramentas de compilação, onde todos os templates são escritos diretamente dentro da página HTML.
31
+
A maioria dos casos de uso de `inline-template` assume um ambiente sem ferramentas de compilação, onde todos os _templates_ são escritos diretamente dentro da página HTML.
32
32
33
-
[Sinalizador da compilação de migração: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-configuration)
33
+
[Sinalizador na compilação de migração: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-configuration)
34
34
35
35
### Opção #1: Utilize a tag `<script>`
36
36
@@ -42,7 +42,7 @@ A solução mais simples nestes casos é utilizar a tag `<script>` com um tipo a
42
42
</script>
43
43
```
44
44
45
-
E no componente, aponte para o *template* utilizando um seletor:
45
+
E no componente, aponte para o _template_ utilizando um seletor:
46
46
47
47
```js
48
48
constMyComp= {
@@ -51,34 +51,34 @@ const MyComp = {
51
51
}
52
52
```
53
53
54
-
Isto não requer nenhuma configuração de compilação, funciona em todos os navegadores, não está sujeito a quaisquer ressalvas de análise HTML em DOM (por exemplo, você pode usar nomes de propriedades em camelCase), e fornece destaque de sintaxe na maioria das IDEs. Em *frameworks* tradicionais do lado do servidor, estes *templates* podem ser divididos em partes de *templates* do servidor (incluídas no template HTML principal) para uma melhor manutenção.
54
+
Isto não requer nenhuma configuração de compilação, funciona em todos os navegadores, não está sujeito a quaisquer limitações da análise de HTML no-DOM (ex.: você pode usar nomes de propriedades em camelCase) e fornece destaque de sintaxe na maioria das IDEs. Em frameworks tradicionais que trabalham no lado do servidor, estes _templates_ podem ser divididos em partes de _templates_ do servidor (incluídas no _template_ HTML principal) para uma melhor manutenção.
55
55
56
-
### Opção #2: Slot Padrão
56
+
### Opção #2: _Slot__Default_
57
57
58
-
Um componente que anteriormente utilizava `inline-template` também pode ser refatorado utilizando o *slot* padrão - o que torna a definição do escopo de dados mais explícita enquanto preserva a conveniência de escrever o conteúdo filho em linha:
58
+
Um componente que anteriormente utilizava `inline-template` também pode ser refatorado utilizando o _slot__default_ - o que torna a definição do escopo de dados mais explícita enquanto preserva a conveniência de escrever o conteúdo filho _inline_:
59
59
60
60
```html
61
-
<!-- Sintaxe 2.x -->
61
+
<!-- Sintaxe v2.x -->
62
62
<my-compinline-template:msg="parentMsg">
63
63
{{ msg }} {{ childState }}
64
64
</my-comp>
65
65
66
-
<!-- Versão com Slot Padrão-->
66
+
<!-- Versão com Slot Default-->
67
67
<my-compv-slot="{ childState }">
68
68
{{ parentMsg }} {{ childState }}
69
69
</my-comp>
70
70
```
71
71
72
-
O componente filho, ao invés de não fornecer nenhum template, agora deve renderizar o *slot* padrão\*:
72
+
O componente filho, ao invés de não fornecer nenhum _template_, agora deve renderizar o _slot__default_\*:
73
73
74
74
```html
75
75
<!--
76
-
no template filho, renderiza o slot padrão enquanto passa
76
+
no template filho, renderiza o slot default enquanto passa
77
77
o estado privado necessário do filho.
78
78
-->
79
79
<template>
80
80
<slot:childState="childState" />
81
81
</template>
82
82
```
83
83
84
-
> - Nota: na versão 3.x, *slots* podem ser renderizados como raiz com suporte nativo a [fragmentos](/guide/migration/fragments)!
84
+
> - Nota: na versão 3.x, _slots_ podem ser renderizados como raiz com suporte nativo a [fragmentos](/guide/migration/fragments)!
0 commit comments