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
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:
53
53
54
54
```js
55
55
app.component('todo-list', {
@@ -60,7 +60,6 @@ app.component('todo-list', {
60
60
},
61
61
provide: {
62
62
todoLength:this.todos.length// isso resultará no erro `Cannot read property 'length' of undefined`
63
-
64
63
},
65
64
template:`
66
65
...
@@ -88,16 +87,16 @@ app.component('todo-list', {
88
87
})
89
88
```
90
89
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`.
92
91
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:
94
93
95
94
- os componentes pai não precisam saber quais descendentes usam as propriedades que ele fornece
96
95
- os componentes filhos não precisam saber de onde vêm as propriedades injetadas
97
96
98
97
## Trabalhando com Reatividade
99
98
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:
101
100
102
101
```js
103
102
app.component('todo-list', {
@@ -110,4 +109,4 @@ app.component('todo-list', {
110
109
})
111
110
```
112
111
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