diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index f76a4c1f20..fa443da66d 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -1,12 +1,12 @@ -# Non-Prop Attributes +# Atributos Não-Propriedades -> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +> 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. -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. +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`. -## Attribute Inheritance +## Herança de Atributos -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: +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: ```js app.component('date-picker', { @@ -18,19 +18,19 @@ app.component('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`). +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`). ```html - + - +
``` -Same rule applies to the event listeners: +A mesma regra se aplica aos ouvintes de eventos: ```html @@ -44,21 +44,21 @@ app.component('date-picker', { }) ``` -This might be helpful when we have an HTML element with `change` event as a root element of `date-picker`. +Isso pode ser útil quando temos um elemento HTML com um evento `change` como elemento raiz de `date-picker`. ```js app.component('date-picker', { template: ` ` }) ``` -In this case, `change` event listener is passed from the parent component to the child and it will be triggered on native ``. Não precisamos emitir um evento de `date-picker` explicitamente: ```html
@@ -70,21 +70,21 @@ In this case, `change` event listener is passed from the parent component to the const app = Vue.createApp({ methods: { showChange(event) { - console.log(event.target.value) // will log a value of the selected option + console.log(event.target.value) // exibirá o valor da opção selecionada } } }) ``` -## Disabling Attribute Inheritance +## Desativando a Herança de Atributos -If you do **not** want a component to automatically inherit attributes, you can set `inheritAttrs: false` in the component's options. +Se você **não** deseja que um componente herde atributos automaticamente, você pode definir `inheritAttrs: false` nas opções do componente. -The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node. +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. -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.). +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.). -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. +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`. ```js{5} app.component('date-picker', { @@ -97,28 +97,28 @@ app.component('date-picker', { }) ``` -With this new configuration, our `data-status` attribute will be applied to our `input` element! +Com esta nova configuração, nosso atributo `data-status` será aplicado ao nosso elemento `input`! ```html - + - +
``` -## Attribute Inheritance on Multiple Root Nodes +## Herança de Atributos em Vários Nós Raízes -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. +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. ```html ``` ```js -// This will raise a warning +// Isso irá gerar um aviso app.component('custom-layout', { template: `
...
@@ -127,7 +127,7 @@ app.component('custom-layout', { ` }) -// No warnings, $attrs are passed to
element +// Sem avisos, $attrs são passados para o elemento
app.component('custom-layout', { template: `
...