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
Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) has been removed.
10
+
O suporte ao [recurso _inline-template_](https://br.vuejs.org/v2/guide/components-edge-cases.html#Templates-Inline) foi removido.
11
11
12
-
## 2.x Syntax
12
+
## Sintaxe v2.x
13
13
14
-
In 2.x, Vue provided the `inline-template`attribute on child components to use its inner content as its template instead of treating it as distributed content.
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
-
<p>These are compiled as the component's own template.</p>
20
-
<p>Not parent's transclusion content.</p>
19
+
<p>Estes são compilados como template do próprio componente.</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
-
## 3.x Syntax
25
+
## Sintaxe v3.x
26
26
27
-
This feature will no longer be supported.
27
+
Esta funcionalidade não receberá mais suporte.
28
28
29
-
## Migration Strategy
29
+
## Estratégia de Migração
30
30
31
-
Most of the use cases for `inline-template`assumes a no-build-tool setup, where all templates are written directly inside the HTML page.
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.
[Sinalizador na compilação de migração: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-configuration)
34
34
35
-
### Option#1: Use `<script>` tag
35
+
### Opção#1: Utilize a tag `<script>`
36
36
37
-
The most straightforward workaround in such cases is using `<script>`with an alternative type:
37
+
A solução mais simples nestes casos é utilizar a tag `<script>`com um tipo alternativo:
38
38
39
39
```html
40
40
<scripttype="text/html"id="my-comp-template">
41
41
<div>{{ hello }}</div>
42
42
</script>
43
43
```
44
44
45
-
And in the component, target the template using a selector:
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
-
This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
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
-
### Option#2: Default Slot
56
+
### Opção#2: _Slot__Default_
57
57
58
-
A component previously using `inline-template`can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
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
-
<!--2.x Syntax-->
61
+
<!--Sintaxe v2.x-->
62
62
<my-compinline-template:msg="parentMsg">
63
63
{{ msg }} {{ childState }}
64
64
</my-comp>
65
65
66
-
<!--Default Slot Version-->
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
-
The child, instead of providing no template, should now render the default slot\*:
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
-
in child template, render default slot while passing
77
-
in necessary private state of child.
76
+
no template filho, renderiza o slot default enquanto passa
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
-
> -Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!
84
+
> -Nota: na versão 3.x, _slots_ podem ser renderizados como raiz com suporte nativo a [fragmentos](/guide/migration/fragments)!
0 commit comments