|
6 | 6 |
|
7 | 7 | - **Detalhes:**
|
8 | 8 |
|
9 |
| - A função que retorna um objeto de dados para a instância do componente. Em `data`, não recomendamos observar objetos com seu próprio comportamento com estado, como objetos de API do navegador e propriedades de protótipo. Uma boa ideia seria ter aqui apenas um objeto simples que representa os dados do componente. |
| 9 | + A função que retorna um objeto de dados para a instância do componente. Em `data`, não recomendamos observar objetos com seu próprio comportamento com estado, como objetos de API do navegador e propriedades _prototype_. Uma boa ideia seria ter aqui apenas um objeto simples que representa os dados do componente. |
10 | 10 |
|
11 | 11 | Uma vez observado, você não pode mais adicionar propriedades reativas ao objeto de dados raiz. Portanto, é recomendável declarar antecipadamente todas as propriedades reativas de nível raiz, antes da criação da instância.
|
12 | 12 |
|
13 |
| - Depois da instância ser criada, o objeto de dados original pode ser acessado como `vm.$data`. A instância do componente também faz proxy de todas as propriedades encontradas no objeto de dados, então `vm.a` será equivalente a `vm.$data.a`. |
| 13 | + Depois da instância ser criada, o objeto de dados original pode ser acessado como `vm.$data`. A instância do componente também faz _proxy_ de todas as propriedades encontradas no objeto de dados, então `vm.a` será equivalente a `vm.$data.a`. |
14 | 14 |
|
15 |
| - Propriedades que comecem com `_` ou `$` **não** será feito proxy na instância do componente porque eles podem entrar em conflito com as propriedades internas do Vue ou métodos de API. Você terá que acessá-las como `vm.$data._property`. |
| 15 | + Propriedades que comecem com `_` ou `$` **não** terão seu _proxy_ feito na instância do componente porque eles podem entrar em conflito com as propriedades internas do Vue ou métodos de API. Você terá que acessá-las como `vm.$data._property`. |
16 | 16 |
|
17 | 17 | - **Exemplo:**
|
18 | 18 |
|
|
48 | 48 |
|
49 | 49 | Com a sintaxe baseada em Object, você pode usar as seguintes opções:
|
50 | 50 |
|
51 |
| - - `type`: pode ser um dos seguintes construtores nativos: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, qualquer função construtora personalizada ou um array delas. Irá verificar se um prop tem um determinado tipo, e irá lançar um aviso se não tiver. [Mais informação](../guide/component-props.html#prop-types) em tipos de props. |
| 51 | + - `type`: pode ser um dos seguintes construtores nativos: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, qualquer função construtora personalizada ou um array delas. Irá verificar se um prop tem um determinado tipo, e irá lançar um aviso se não tiver. [Mais informação](../guide/component-props.html#tipos-de-propriedades) em tipos de props. |
52 | 52 | - `default`: `any`
|
53 | 53 | Especifica um valor padrão para o prop. Se o prop não é passado, este valor será usado em seu lugar. Valores padrão de tipo Object ou Array devem ser retornados de uma função *factory*.
|
54 | 54 | - `required`: `Boolean`
|
55 | 55 | Define se o prop é necessário. Em ambiente de não-produção, um aviso de console será lançado se esse valor for verdadeiro e o prop não for passado.
|
56 | 56 | - `validator`: `Function`
|
57 |
| - Função validadora personalizada que usa o valor do prop como único argumento. Exceto em ambiente de produção, um aviso de console será lançado se essa função retornar um valor falso (ou seja, a validação falhar). Pode ler mais sobre validação de prop [aqui](../guide/component-props.html#prop-validation). |
| 57 | + Função validadora personalizada que usa o valor do prop como único argumento. Exceto em ambiente de produção, um aviso de console será lançado se essa função retornar um valor falso (ou seja, a validação falhar). Pode ler mais sobre validação de prop [aqui](../guide/component-props.html#validacao-de-propriedades). |
58 | 58 |
|
59 | 59 | - **Exemplo:**
|
60 | 60 |
|
|
92 | 92 |
|
93 | 93 | - **Detalhes:**
|
94 | 94 |
|
95 |
| - Propriedades computadas a serem combinadas na instância do componente. Todos os getters e setters tem o seu contexto `this` vinculado automaticamente à instância do componente. |
| 95 | + Dados computados a serem combinados na instância do componente. Todos os getters e setters tem o seu contexto `this` vinculado automaticamente à instância do componente. |
96 | 96 |
|
97 |
| - Note que se usar *arrow function* com uma propriedade computada, `this` não será a instância do componente, mas você poderá ter acesso a instância através do primeiro argumento da função: |
| 97 | + Note que se usar *arrow function* com um dado computado, `this` não será a instância do componente, mas você poderá ter acesso a instância através do primeiro argumento da função: |
98 | 98 |
|
99 | 99 | ```js
|
100 | 100 | computed: {
|
101 | 101 | aDouble: vm => vm.a * 2
|
102 | 102 | }
|
103 | 103 | ```
|
104 | 104 |
|
105 |
| - Propriedades computadas são cacheadas, e apenas recalculados quando dependências reativas mudam. Note que se uma certa dependência está fora do escopo da instância (ex.: não reativa), o dado computado **não** será atualizado. |
| 105 | + Dados computados são cacheados, e apenas re-computados quando dependências reativas mudam. Note que se uma certa dependência está fora do escopo da instância (ex.: não reativa), o dado computado **não** será atualizado. |
106 | 106 |
|
107 | 107 | - **Exemplo:**
|
108 | 108 |
|
|
145 | 145 |
|
146 | 146 | Métodos a serem combinados na instância do componente. Você pode acessar esses métodos diretamente na instância VM ou usá-los em expressões de diretiva. Todos os métodos terão o seu contexto `this` automaticamente vinculado à instância do componente.
|
147 | 147 |
|
148 |
| - :::tip Note |
149 |
| - Note que **você não deve usar *arrow function* para definir um método** (ex. `plus: () => this.a++`). A razão é que *arrow functions* fazem bind do contexto pai, então `this` não será a instância Vue como você está esperando e `this.a` será undefined. |
| 148 | + ::: tip Nota |
| 149 | + Note que **você não deve usar *arrow function* para definir um método** (ex. `plus: () => this.a++`). A razão é que *arrow functions* fazem *bind* do contexto pai, então `this` não será a instância Vue como você está esperando e `this.a` será `undefined`. |
150 | 150 | :::
|
151 | 151 |
|
152 | 152 | - **Exemplo:**
|
|
177 | 177 |
|
178 | 178 | - **Detalhes:**
|
179 | 179 |
|
180 |
| - Um objeto onde as chaves são expressões para observar e os valores são os callbacks correspondentes. O valor também pode ser uma string de um nome de método ou um Object que contém opções adicionais. A instância do componente chamará `$watch()` para cada entrada no objeto na inicialização. Veja [$watch](instance-methods.html#watch) para mais informações sobre as opções `deep`, `immediate` e `flush`. |
| 180 | + Um objeto onde as chaves são expressões para observar e os valores são os *callbacks* correspondentes. O valor também pode ser uma string de um nome de método ou um Object que contém opções adicionais. A instância do componente chamará `$watch()` para cada entrada no objeto na inicialização. Veja [$watch](instance-methods.html#watch) para mais informações sobre as opções `deep`, `immediate` e `flush`. |
181 | 181 |
|
182 | 182 | - **Exemplo:**
|
183 | 183 |
|
|
200 | 200 | },
|
201 | 201 | // nome do método como string
|
202 | 202 | b: 'someMethod',
|
203 |
| - // o callback será chamado sempre que qualquer uma das propriedades do objeto observado mudar, |
204 |
| - // independentemente de sua profundidade aninhada |
| 203 | + // o callback será chamado na alteração das propriedades do objeto |
| 204 | + // observado, independentemente de sua profundidade aninhada |
205 | 205 | c: {
|
206 | 206 | handler(val, oldVal) {
|
207 | 207 | console.log('c mudou')
|
|
215 | 215 | },
|
216 | 216 | immediate: true
|
217 | 217 | },
|
218 |
| - // você pode passar uma array de callbacks, eles serão chamados um por um |
| 218 | + // você pode passar um array de callbacks, eles serão chamados um por um |
219 | 219 | f: [
|
220 | 220 | 'handle1',
|
221 | 221 | function handle2(val, oldVal) {
|
|
244 | 244 | vm.a = 3 // => new: 3, old: 1
|
245 | 245 | ```
|
246 | 246 |
|
247 |
| - ::: tip Note |
248 |
| - Note que _você não deve usar arrow function para definir um observador_ (ex. `searchQuery: newValue => this.updateAutocomplete(newValue)`). A razão é que *arrow functions* fazem bind do contexto pai, então `this` não será a instância do componente como você espera e `this.updateAutocomplete` será undefined. |
| 247 | + ::: tip Nota |
| 248 | + Note que _você não deve usar arrow function para definir um observador_ (ex. `searchQuery: newValue => this.updateAutocomplete(newValue)`). A razão é que *arrow functions* fazem *bind* do contexto pai, então `this` não será a instância do componente como você espera e `this.updateAutocomplete` será `undefined`. |
249 | 249 | :::
|
250 | 250 |
|
251 |
| -- **Ver também:** [Observadores](../guide/computed.html#watchers) |
| 251 | +- **Ver também:** [Observadores](../guide/computed.html#observadores) |
252 | 252 |
|
253 | 253 | ## emits
|
254 | 254 |
|
|
258 | 258 |
|
259 | 259 | Uma lista/*hash* de eventos personalizados pode ser emitida do componente. Possui tanto uma sintaxe simples baseada em Array como, alternativamente, uma sintaxe baseada em Object que permite configurar uma validação de evento.
|
260 | 260 |
|
261 |
| - Na sintaxe baseada em Object, o valor de cada propriedade pode ser `null` ou uma função validadora. A função de validação receberá os argumentos adicionais passados para a chamada `$emit`. Por exemplo, se `this.$emit('foo', 1)` for chamado, o validador correspondente para `foo` receberá o argumento `1`. A função validadora deve retornar um booleano para indicar se os argumentos do evento são válidos. |
| 261 | + Na sintaxe baseada em Object, o valor de cada propriedade pode ser `null` ou uma função de validação. A função de validação receberá os argumentos adicionais passados para a chamada `$emit`. Por exemplo, se `this.$emit('foo', 1)` for chamado, o validador correspondente para `foo` receberá o argumento `1`. A função de validação deve retornar um booleano para indicar se os argumentos do evento são válidos. |
262 | 262 |
|
263 | 263 | - **Uso:**
|
264 | 264 |
|
|
284 | 284 | if (payload.email && payload.password) {
|
285 | 285 | return true
|
286 | 286 | } else {
|
287 |
| - console.warn(`Evento de envio payload inválido!`) |
| 287 | + console.warn(`Payload do evento 'submit' inválido!`) |
288 | 288 | return false
|
289 | 289 | }
|
290 | 290 | }
|
291 | 291 | }
|
292 | 292 | })
|
293 | 293 | ```
|
294 | 294 |
|
295 |
| - ::: tip Note |
| 295 | + ::: tip Nota |
296 | 296 | Os eventos listados na opção `emits` **não** serão herdados pelo elemento raiz do componente e também serão excluídos da propriedade `$attrs`.
|
297 | 297 | :::
|
298 | 298 |
|
299 |
| -* **Ver também:** [Herança de Atributo](../guide/component-attrs.html#attribute-inheritance) |
| 299 | +* **Ver também:** [Herança de Atributos](../guide/component-attrs.html#heranca-de-atributos) |
0 commit comments