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
Copy file name to clipboardExpand all lines: src/guide/component-attrs.md
+27-27Lines changed: 27 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Non-Prop Attributes
1
+
# Atributos Não-Propriedades
2
2
3
-
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
3
+
> 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.
4
4
5
-
A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props)or[emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and`id` attributes. You can access those attributes via `$attrs` property.
5
+
Um atributo de componente não-propriedade é um atributo ou ouvinte de evento que é passado para um componente, mas não tem uma propriedade correspondente definida em [props](component-props)ou[emits](component-custom-events.html#defining-custom-events). Os exemplos comuns disto incluem atributos `class`, `style`, e`id`. Você pode acessar esses atributos por meio da propriedade `$attrs`.
6
6
7
-
## Attribute Inheritance
7
+
## Herança de Atributos
8
8
9
-
When a component returns a single root node, non-prop attributes will automatically be added to the root node's attributes. For example, in the instance of a date-picker component:
9
+
Quando um componente retorna um único nó raiz, atributos não-propriedade serão automaticamente adicionados aos atributos do nó raiz. Por exemplo, na instância de um componente date-picker:
In the event we need to define the status of the date-picker component via a `data-status` property, it will be applied to the root node (i.e., `div.date-picker`).
21
+
No caso de precisarmos definir o status do componente date-picker por meio de uma propriedade `data-status`, ele será aplicado ao nó raiz (ou seja, `div.date-picker`).
22
22
23
23
```html
24
-
<!--Date-picker component with a non-prop attribute-->
24
+
<!--Componente date-picker com um atributo não-propriedade-->
This might be helpful when we have an HTML element with `change`event as a root element of`date-picker`.
47
+
Isso pode ser útil quando temos um elemento HTML com um evento `change`como elemento raiz de`date-picker`.
48
48
49
49
```js
50
50
app.component('date-picker', {
51
51
template:`
52
52
<select>
53
-
<option value="1">Yesterday</option>
54
-
<option value="2">Today</option>
55
-
<option value="3">Tomorrow</option>
53
+
<option value="1">Ontem</option>
54
+
<option value="2">Hoje</option>
55
+
<option value="3">Amanhã</option>
56
56
</select>
57
57
`
58
58
})
59
59
```
60
60
61
-
In this case, `change`event listener is passed from the parent component to the child and it will be triggered on native `<select>``change` event. We won't need to emit an event from the `date-picker`explicitly:
61
+
Nesse caso, o evento `change`é passado do componente pai para o filho e será acionado no evento nativo `change` do `<select>`. Não precisamos emitir um evento de `date-picker`explicitamente:
62
62
63
63
```html
64
64
<divid="date-picker"class="demo">
@@ -70,21 +70,21 @@ In this case, `change` event listener is passed from the parent component to the
70
70
constapp=Vue.createApp({
71
71
methods: {
72
72
showChange(event) {
73
-
console.log(event.target.value) //will log a value of the selected option
73
+
console.log(event.target.value) //exibirá o valor da opção selecionada
74
74
}
75
75
}
76
76
})
77
77
```
78
78
79
-
## Disabling Attribute Inheritance
79
+
## Desativando a Herança de Atributos
80
80
81
-
If you do **not**want a component to automatically inherit attributes, you can set`inheritAttrs: false`in the component's options.
81
+
Se você **não**deseja que um componente herde atributos automaticamente, você pode definir`inheritAttrs: false`nas opções do componente.
82
82
83
-
The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node.
83
+
O cenário comum para desativar uma herança de atributo é quando os atributos precisam ser aplicados a outros elementos além do nó raiz.
84
84
85
-
By setting the `inheritAttrs`option to `false`, you can control to apply to other elements attributes to use the component's `$attrs`property, which includes all attributes not included to component `props`and`emits`properties (e.g., `class`, `style`, `v-on` listeners, etc.).
85
+
Ao definir a opção `inheritAttrs`para `false`, você pode controlar a aplicação em outros atributos dos elementos, para que usem a propriedade `$attrs`do componente, que inclui todos os atributos não incluídos às propriedades `props`e`emits`do componente (por exemplo, `class`, `style`, eventos `v-on`, etc.).
86
86
87
-
Using our date-picker component example from the [previous section]('#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input`element rather than the root `div`element, this can be accomplished by using the`v-bind` shortcut.
87
+
Usando nosso exemplo de componente date-picker da [seção anterior](#heranca-de-atributos), no caso de precisarmos aplicar todos os atributos não-propriedade ao elemento `input`em vez do elemento `div`raiz, isso pode ser feito usando o atalho`v-bind`.
Unlike single root node components, components with multiple root nodes do not have an automatic attribute fallthrough behavior. If`$attrs`are not bound explicitly, a runtime warning will be issued.
114
+
Ao contrário dos componentes de um único nó raiz, os componentes com vários nós raízes não têm um comportamento de falha de atributo automático. Se`$attrs`não for vinculado explicitamente, um aviso de tempo de execução será emitido.
0 commit comments