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
`$attrs`now contains _all_ attributes passed to a component, including`class`and`style`.
11
+
`$attrs`agora contém _todos_ atributos passados para um componente, incluindo`class`e`style`.
12
12
13
-
## 2.x Behavior
13
+
## Comportamento v2.x
14
14
15
-
`class`and`style`attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in`$attrs`, while all other attributes are.
15
+
Os atributos `class`e`style`recebem algum tratamento especial na implementação do DOM virtual do Vue 2. Por essa razão, eles _não_ são incluídos em`$attrs`, enquanto todos os outros atributos são.
16
16
17
-
A side effect of this manifests when using`inheritAttrs: false`:
17
+
Um efeito colateral disso se manifesta ao usar`inheritAttrs: false`:
18
18
19
-
-Attributes in`$attrs`are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
20
-
-But`class`and`style`, not being part of`$attrs`, will still be applied to the component's root element:
19
+
-Atributos em`$attrs`não são mais adicionados automaticamente ao elemento raiz, deixando para o desenvolvedor decidir onde adicioná-los.
20
+
-Mas`class`e`style`, não sendo parte de`$attrs`, ainda serão aplicados ao elemento raiz do componente:
`$attrs`contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
51
+
`$attrs`contém _todos_ atributos, o que facilita a aplicação de todos eles a um elemento diferente. O exemplo acima agora gera o seguinte HTML:
52
52
53
53
```html
54
54
<label>
@@ -58,14 +58,14 @@ when used like this:
58
58
59
59
## Estratégia de Migração
60
60
61
-
In components that use`inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class`and`style`, some visuals might be broken as these attributes might now be applied to another element.
61
+
Em componentes que usam`inheritAttrs: false`, certifique-se de que o estilo ainda funcione como pretendido. Se você confiava anteriormente no comportamento especial de `class`e`style`, alguns visuais podem ser quebrados, pois esses atributos agora podem ser aplicados a outro elemento.
62
62
63
63
[Sinalizador na compilação de migração: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#configuracao-de-compatibilidade)
The `$children`instance property has been removed from Vue 3.0 and is no longer supported.
10
+
A propriedade de instância `$children`foi removida do Vue 3.0 e não é mais suportada.
11
11
12
-
## 2.x Syntax
12
+
## Sintaxe v2.x
13
13
14
-
In 2.x, developers could access direct child components of the current instance with`this.$children`:
14
+
Na v2.x, os desenvolvedores podiam acessar componentes filhos diretos da instância atual com`this.$children`:
15
15
16
16
```vue
17
17
<template>
18
18
<div>
19
19
<img alt="Vue logo" src="./assets/logo.png">
20
-
<my-button>Change logo</my-button>
20
+
<my-button>Alterar logotipo</my-button>
21
21
</div>
22
22
</template>
23
23
@@ -35,9 +35,9 @@ export default {
35
35
</script>
36
36
```
37
37
38
-
## 3.x Update
38
+
## Atualização v3.x
39
39
40
-
In 3.x, the `$children`property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs).
40
+
Na v3.x, a propriedade `$children`foi removida e não é mais suportada. Em vez disso, se você precisar acessar uma instância de componente filho, recomendamos usar [$refs](/guide/component-template-refs.html#refs-de-template).
Vue 3 now offers an `emits` option, similar to the existing `props`option. This option can be used to define the events that a component can emit to its parent.
11
+
O Vue 3 agora oferece uma opção `emits`, semelhante à opção `props`existente. Esta opção pode ser usada para definir os eventos que um componente pode emitir para seu pai.
12
12
13
-
## 2.x Behavior
13
+
## Comportamento v2.x
14
14
15
-
In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit:
15
+
No Vue 2, você pode definir as props que um componente recebe, mas não pode declarar quais eventos ele pode emitir:
16
16
17
17
```vue
18
18
<template>
@@ -28,9 +28,9 @@ In Vue 2, you can define the props that a component receives, but you can't decl
28
28
</script>
29
29
```
30
30
31
-
## 3.x Behavior
31
+
## Comportamento v3.x
32
32
33
-
Similar to props, the events that the component emits can now be defined with the `emits` option:
33
+
Semelhante a props, os eventos que o componente emite agora podem ser definidos com a opção `emits`:
34
34
35
35
```vue
36
36
<template>
@@ -47,51 +47,51 @@ Similar to props, the events that the component emits can now be defined with th
47
47
</script>
48
48
```
49
49
50
-
The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props` definitions.
50
+
A opção também aceita um objeto, que permite ao desenvolvedor definir validadores para os argumentos que são passados com o evento emitido, semelhante aos validadores nas definições de `props`.
51
51
52
-
For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits).
52
+
Para obter mais informações sobre isso, leia a [documentação da API para este recurso](../../api/options-data.md#emits).
53
53
54
54
## Estratégia de Migração
55
55
56
-
It is highly recommended that you document all the events emitted by each of your components using`emits`.
56
+
É altamente recomendado que você documente todos os eventos emitidos por cada um de seus componentes usando`emits`.
57
57
58
-
This is especially important because of [the removal of the `.native` modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits`will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
58
+
Isso é especialmente importante por causa da [remoção do modificador `.native`](./v-on-native-modifier-removed.md). Quaisquer escutadores para eventos que não são declarados com `emits`agora serão incluídos no `$attrs` do componente, que por padrão será vinculado ao nó raiz do componente.
59
59
60
-
### Example
60
+
### Exemplo
61
61
62
-
For components that re-emit native events to their parent, this would now lead to two events being fired:
62
+
Para componentes que reemitem eventos nativos para seus pais, isso agora levaria ao disparo de dois eventos:
When a parent listens for the`click`event on the component:
75
+
Quando um pai escuta o evento`click`no componente:
76
76
77
77
```html
78
78
<my-buttonv-on:click="handleClick"></my-button>
79
79
```
80
80
81
-
it would now be triggered _twice_:
81
+
agora seria acionado _duas vezes_:
82
82
83
-
-Once from`$emit()`.
84
-
-Once from a native event listener applied to the root element.
83
+
-Uma vez de`$emit()`.
84
+
-Uma vez de um escutador de evento nativo aplicado ao elemento raiz.
85
85
86
-
Here you have two options:
86
+
Aqui você tem duas opções:
87
87
88
-
1.Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in`<my-button>`.
89
-
2.Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding`.native`. Suitable when you really only re-emit the event anyway.
88
+
1.Declare corretamente o evento `click`. Isso é útil se você realmente adicionar alguma lógica a esse manipulador de eventos em`<my-button>`.
89
+
2.Remova a reemissão do evento, pois o pai agora pode escutar o evento nativo facilmente, sem adicionar`.native`. Adequado quando você realmente apenas reemite o evento de qualquer maneira.
onClose: () =>console.log('Evento close acionado')
17
17
}
18
18
```
19
19
20
-
## 2.x Syntax
20
+
## Sintaxe v2.x
21
21
22
-
In Vue 2, you can access attributes passed to your components with`this.$attrs`, and event listeners with`this.$listeners`.
23
-
In combination with`inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element:
22
+
No Vue 2, você pode acessar atributos passados para seus componentes com`this.$attrs`, e escutadores de eventos com`this.$listeners`.
23
+
Em combinação com`inheritAttrs: false`, eles permitem que o desenvolvedor aplique esses atributos e escutadores a algum outro elemento em vez do elemento raiz:
24
24
25
25
```html
26
26
<template>
@@ -35,9 +35,9 @@ In combination with `inheritAttrs: false`, they allow the developer to apply the
35
35
</script>
36
36
```
37
37
38
-
## 3.x Syntax
38
+
## Sintaxe v3.x
39
39
40
-
In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with`on`, and as such are part of the`$attrs` object, so`$listeners`has been removed.
40
+
No DOM virtual do Vue 3, os escutadores de eventos agora são apenas atributos, prefixados com`on`, e como tal são parte do objeto`$attrs`, então`$listeners`foi removido.
41
41
42
42
```vue
43
43
<template>
@@ -52,25 +52,25 @@ export default {
52
52
</script>
53
53
```
54
54
55
-
If this component received an `id`attribute and a`v-on:close` listener, the `$attrs`object will now look like this:
55
+
Se este componente recebeu um atributo `id`e um escutador`v-on:close`, o objeto `$attrs`agora ficará assim:
0 commit comments