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
<divclass="vueschool"><ahref="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs"target="_blank"rel="sponsored noopener"title="Learn how to use teleport with Vue School">Learn how to use teleport with a free lesson on Vue School</a></div>
3
+
<divclass="vueschool"><ahref="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs"target="_blank"rel="sponsored noopener"title="Aprenda a usar o teleport com Vue School">Aprenda como usar o teleporte em uma aula grátis do Vue School</a></div>
4
4
5
-
Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.
5
+
O Vue nos encoraja à construir nossas interfaces de usuário (UIs) encapsulando a UI e seu respectivo comportamento em componentes. Podemos aninhar componentes dentro de outros componentes e montar uma árvore que constitui a UI da aplicação.
6
6
7
-
However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.
7
+
Entretanto, algumas vezes uma parte do _template_ do componente pertence à esse componente de forma lógica, enquanto do ponto de vista técnico, seria preferível mover essa parte do _template_ para outro lugar no DOM, fora da aplicação Vue.
8
8
9
-
A common scenario for this is creating a component that includes a full-screen modal. In most cases, you'd want the modal's logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.
9
+
Um cenário comum para isso é a criação de um componente que inclui um _modal_ em tela cheia. Na maioria dos casos, você gostaria que a lógica do modal residisse dentro do componente, mas o posicionamento do modal se torna difícil de resolver por meio de CSS ou requer uma mudança na composição do componente.
10
10
11
-
Consider the following HTML structure.
11
+
Considere a seguinte estrutura HTML.
12
12
13
13
```html
14
14
<body>
15
15
<divstyle="position: relative;">
16
-
<h3>Tooltips with Vue 3 Teleport</h3>
16
+
<h3>Tooltips com Vue 3 e Teleport</h3>
17
17
<div>
18
18
<modal-button></modal-button>
19
19
</div>
20
20
</div>
21
21
</body>
22
22
```
23
23
24
-
Let's take a look at `modal-button`.
24
+
Vamos olhar o `modal-button` de perto.
25
25
26
-
The component will have a`button`element to trigger the opening of the modal, and a `div`element with a class of `.modal`, which will contain the modal's content and a button to self-close.
26
+
O componente terá um elemento`button`para acionar a abertura do modal e um elemento `div`com uma classe `.modal` que irá conter o conteúdo do modal e um botão para fechá-lo.
When using this component inside the initial HTML structure, we can see a problem - the modal is being rendered inside the deeply nested `div`and the `position: absolute`of the modal takes the parent relatively positioned `div`as reference.
54
+
Ao usar esse componente dentro da estrutura HTML inicial, podemos ver um problema - o modal está sendo renderizado dentro de uma `div`profundamente aninhada e a `position: absolute`do modal toma como referência a `div`pai posicionada relativamente.
55
55
56
-
Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.
56
+
O Teleporte fornece uma maneira limpa para nos permitir controlar sob que elemento pai no DOM nós queremos que uma parte do HTML seja rederizada, sem ter que recorrer ao estado global ou dividí-lo em dois componentes.
57
57
58
-
Let's modify our`modal-button`to use `<teleport>`and tell Vue "**teleport**this HTML **to**the "**body**" tag".
58
+
Vamos modificar nosso`modal-button`para usar o `<teleport>`e dizer ao Vue que "**teleporte**esse HTML **para**a _tag_ '**body**'".
59
59
60
60
```js
61
61
app.component('modal-button', {
62
62
template:`
63
63
<button @click="modalOpen = true">
64
-
Open full screen modal! (With teleport!)
64
+
Abrir modal de tela cheia! (Com Teleporte!)
65
65
</button>
66
66
67
67
<teleport to="body">
68
68
<div v-if="modalOpen" class="modal">
69
69
<div>
70
-
I'm a teleported modal!
71
-
(My parent is "body")
70
+
Eu sou um modal teleportado!
71
+
(Meu pai é o "body")
72
72
<button @click="modalOpen = false">
73
-
Close
73
+
Fechar
74
74
</button>
75
75
</div>
76
76
</div>
@@ -84,7 +84,7 @@ app.component('modal-button', {
84
84
})
85
85
```
86
86
87
-
As a result, once we click the button to open the modal, Vue will correctly render the modal's content as a child of the `body` tag.
87
+
Como resultado, uma vez que clicamos no botão para abrir o modal, o Vue irá renderizar corretamente o conteúdo como um filho da _tag_`body`.
In this case, even when `child-component`is rendered in the different place, it will remain a child of `parent-component`and will receive a `name`prop from it.
125
+
Neste caso, mesmo quando o `child-component`é renderizado em um lugar diferente, permanecerá como filho do `parent-component`e receberá a propriedade `name`dele.
126
126
127
-
This also means that injections from a parent component work as expected, and that the child component will be nested below the parent component in the Vue Devtools, instead of being placed where the actual content moved to.
127
+
Isso também significa que injeções vindas do componente pai funcionam como o esperado, e que o componente filho será aninhado embaixo do componente pai no _Vue Devtools_, em vez de ser colocado no lugar para o qual o conteúdo foi movido.
128
128
129
-
## Using multiple teleports on the same target
129
+
## Usando Múltiplos Teleportes no Mesmo Alvo
130
130
131
-
A common use case scenario would be a reusable `<Modal>`component of which there might be multiple instances active at the same time. For this kind of scenario, multiple `<teleport>`components can mount their content to the same target element. The order will be a simple append - later mounts will be located after earlier ones within the target element.
131
+
Um cenário de caso de uso comum pode ser um componente `<Modal>`reutilizável, do qual pode haver várias instâncias ativas ao mesmo tempo. Para esse tipo de cenário, múltiplos componentes `<teleport>`podem montar seus respectivos conteúdos no mesmo elemento alvo. A ordem será simplemente anexá-los - as montagens novas serão localizadas depois das primeiras montagens realizadas no elemento alvo.
132
132
133
133
```html
134
134
<teleportto="#modals">
@@ -145,4 +145,4 @@ A common use case scenario would be a reusable `<Modal>` component of which ther
145
145
</div>
146
146
```
147
147
148
-
You can check `<teleport>`component options in the [API reference](../api/built-in-components.html#teleport)
148
+
Você pode checar as opções do componente `<teleport>`nas [referências da API](../api/built-in-components.html#teleport)
0 commit comments