Skip to content

Commit 3d84323

Browse files
authored
Review on guide/component-provide-inject
1 parent 4954c85 commit 3d84323

File tree

1 file changed

+7
-8
lines changed

1 file changed

+7
-8
lines changed

src/guide/component-provide-inject.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Prover / Injetar (Provide/Inject)
1+
# Prover e Injetar Dados
22

33
> Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia lá primeiro se você for novo em componentes.
44
@@ -11,7 +11,7 @@ Nessas situações, podemos usar o par `provide` e `inject`. Os componentes pai
1111
Por exemplo, se tivéssemos uma hierarquia como esta:
1212

1313
```
14-
Root
14+
Raiz
1515
└─ TodoList
1616
├─ TodoItem
1717
└─ TodoListFooter
@@ -49,7 +49,7 @@ app.component('todo-list-statistics', {
4949
})
5050
```
5151

52-
No entanto, isso não funcionará se tentarmos prover alguma propriedade de instância do componente:
52+
No entanto, isso não funcionará se tentarmos prover alguma propriedade da instância do componente:
5353

5454
```js
5555
app.component('todo-list', {
@@ -60,7 +60,6 @@ app.component('todo-list', {
6060
},
6161
provide: {
6262
todoLength: this.todos.length // isso resultará no erro `Cannot read property 'length' of undefined`
63-
6463
},
6564
template: `
6665
...
@@ -88,16 +87,16 @@ app.component('todo-list', {
8887
})
8988
```
9089

91-
Isso nos permite continuar desenvolvendo esse componente com mais segurança, sem medo de que possamos alterar/remover algo em que um componente filho dependa. A interface entre esses componentes permanece claramente definida, assim como com as suas propriedades.
90+
Isso nos permite continuar desenvolvendo esse componente com mais segurança, sem medo de que possamos alterar/remover algo em que um componente filho dependa. A interface entre esses componentes permanece claramente definida, similar à `props`.
9291

93-
Na verdade, você pode pensar na injeção de dependência como uma espécie de "propriedades de longo alcance", exceto:
92+
Na verdade, você pode pensar na injeção de dependência como uma espécie de "`props` de longo alcance", exceto:
9493

9594
- os componentes pai não precisam saber quais descendentes usam as propriedades que ele fornece
9695
- os componentes filhos não precisam saber de onde vêm as propriedades injetadas
9796

9897
## Trabalhando com Reatividade
9998

100-
No exemplo acima, se alterarmos a lista de tarefas, essa alteração não será refletida na propriedade injetada `todoLength`. Isso ocorre porque as interligações `provide/inject` _não_ são reativas por padrão. Podemos mudar esse comportamento passando uma propriedade `ref` ou objeto reativo (`reactive`) para `provide`. Em nosso exemplo, se quiséssemos reagir às mudanças no componente ancestral, precisaríamos atribuir um dado computado (`computed property`) da API de Composição para nosso `todoLength` fornecido:
99+
No exemplo acima, se alterarmos a lista de tarefas, essa alteração não será refletida na propriedade injetada `todoLength`. Isso ocorre porque as interligações `provide/inject` **não** são reativas por padrão. Podemos mudar esse comportamento passando uma propriedade `ref` ou objeto reativo (`reactive`) para `provide`. Em nosso exemplo, se quiséssemos reagir às mudanças no componente ancestral, precisaríamos atribuir um dado computado (usando o `computed` da API de Composição) para nosso `todoLength` fornecido:
101100

102101
```js
103102
app.component('todo-list', {
@@ -110,4 +109,4 @@ app.component('todo-list', {
110109
})
111110
```
112111

113-
Assim, qualquer alteração em `todos.length` será refletida corretamente nos componentes, onde `todoLength` é injetado. Leia mais sobre `provide/inject` de forma reativa na [seção da API de composição](composition-api-provide-inject.html#injection-reactivity)
112+
Assim, qualquer alteração em `todos.length` será refletida corretamente nos componentes, onde `todoLength` é injetado. Leia mais sobre `provide/inject` de forma reativa na [seção da API de Composição](composition-api-provide-inject.html#injection-reactivity)

0 commit comments

Comments
 (0)