0Pricing
Vue Academy · Aula

defineExpose e useAttrs

Exposição de elementos internos do componente com defineExpose() e useAttrs() para atributos encaminhados.

defineExpose e useAttrs é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Expondo e encaminhando

Mais duas ferramentas completam a comunicação entre componentes: defineExpose permite que um componente pai acesse um componente filho, e useAttrs fornece os atributos restantes passados pelo componente pai. Ambas são comuns em componentes reutilizáveis.

Os componentes são fechados por padrão

Com <script setup>, nada dentro do componente fica acessível a partir de uma referência de modelo no componente pai. Esse encapsulamento é útil, mas às vezes o componente pai precisa legitimamente chamar um método do filho.

defineExpose abre uma porta

defineExpose publica explicitamente métodos ou valores selecionados para o componente pai. Passe um objeto com o que deseja compartilhar.

<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>

Chamando métodos expostos a partir do componente pai

O componente pai obtém o componente filho com uma referência de modelo e chama o método exposto. Somente as chaves passadas a defineExpose ficam visíveis.

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>

<template>
  <Child ref="childRef" />
</template>

Um exemplo de foco

Expor um método focus permite que o componente pai focalize uma entrada dentro de um componente personalizado sem quebrar o encapsulamento.

<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>

O que são atributos de passagem?

Quando um componente pai adiciona ao seu componente um atributo que não é uma prop nem um evento declarado, como class, id ou data-*, ele se torna um atributo de passagem.

Lendo atributos com useAttrs

useAttrs() retorna um objeto com todos os atributos de passagem. Use-o quando precisar inspecioná-los ou reposicioná-los no script.

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>

Passagem automática

Por padrão, o Vue aplica os atributos de passagem ao único elemento raiz do seu modelo. Se o componente tiver uma única raiz div, a class fornecida pelo componente pai será aplicada ali automaticamente.

Desativando a passagem automática

Quando quiser colocar os atributos em outro local que não seja a raiz — por exemplo, em uma entrada interna de um componente envolvente — desative a passagem automática com inheritAttrs: false em um bloco script normal.

<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

Encaminhando atributos com v-bind

Depois de desativar a passagem automática, encaminhe os atributos para o elemento escolhido com v-bind="attrs". Esse é o padrão usado em componentes envolventes de entradas.

<template>
  <label>
    <span>Name</span>
    <input v-bind="attrs" />
  </label>
</template>

Quando usar cada opção

  • defineExpose: permite que o componente pai chame métodos do filho por meio de uma referência de modelo.
  • useAttrs + inheritAttrs: false + v-bind: controla exatamente onde os atributos fornecidos pelo componente pai serão aplicados.

Verificação rápida

Teste seu conhecimento sobre expose e attrs.

Recapitulação

Pontos principais:

  • defineExpose publica métodos ou valores selecionados para a referência do componente pai.
  • Os atributos de passagem são atributos do componente pai que não são props nem eventos.
  • useAttrs() os lê; a passagem automática tem como destino o elemento raiz.
  • Use inheritAttrs: false + v-bind="attrs" para redirecioná-los.

Perguntas Frequentes

A aula “defineExpose e useAttrs” é grátis?

Sim — o texto completo de “defineExpose e useAttrs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “defineExpose e useAttrs”?

Exposição de elementos internos do componente com defineExpose() e useAttrs() para atributos encaminhados. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “defineExpose e useAttrs”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Introdução a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importação e uso de composables em script setup
← Voltar para Vue Academy