0Pricing
Vue Academy · Lezione

defineExpose e useAttrs

Esposizione degli elementi interni del componente con defineExpose(), useAttrs() per gli attributi fallthrough

defineExpose e useAttrs è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Esporre e inoltrare

Altri due strumenti completano la comunicazione tra componenti: defineExpose consente al genitore di accedere al componente figlio, mentre useAttrs fornisce gli attributi rimanenti passati dal genitore. Entrambi sono comuni nei componenti riutilizzabili.

I componenti sono chiusi per impostazione predefinita

Con <script setup>, nulla all'interno del componente è accessibile tramite un template ref del genitore. Questo incapsulamento è utile, ma a volte il genitore deve legittimamente chiamare un metodo del componente figlio.

defineExpose apre una porta

defineExpose pubblica esplicitamente al genitore i metodi o i valori selezionati. Passi un oggetto contenente ciò che desidera condividere.

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

Chiamare i metodi esposti dal genitore

Il genitore recupera il componente figlio tramite un template ref e chiama il metodo esposto. Sono visibili solo le chiavi passate a defineExpose.

<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>

Un esempio con focus

Esporre un metodo focus consente al genitore di portare il focus su un input all'interno di un componente personalizzato senza compromettere l'incapsulamento.

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

Cosa sono gli attributi fallthrough?

Quando un genitore inserisce nel componente un attributo che non è una prop o un evento dichiarato, come class, id o data-*, questo diventa un attributo fallthrough.

Leggere gli attributi con useAttrs

useAttrs() restituisce un oggetto contenente tutti gli attributi fallthrough. Lo usi quando deve esaminarli o spostarli nello script.

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

Fallthrough automatico

Per impostazione predefinita, Vue applica gli attributi fallthrough all'unico elemento radice del template. Se il componente ha un unico div radice, la class fornita dal genitore viene applicata automaticamente a quell'elemento.

Disabilitare il fallthrough automatico

Quando desidera posizionare gli attributi in un punto diverso dalla radice, ad esempio su un input interno a un wrapper, disabiliti il fallthrough automatico con inheritAttrs: false in un blocco script normale.

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

Inoltrare gli attributi con v-bind

Dopo aver disabilitato il fallthrough automatico, inoltri gli attributi all'elemento scelto con v-bind="attrs". È il pattern standard per i wrapper degli input.

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

Quando usare ciascuno strumento

  • defineExpose: consente al genitore di chiamare i metodi del figlio tramite un template ref.
  • useAttrs + inheritAttrs: false + v-bind: permette di controllare esattamente dove vengono applicati gli attributi forniti dal genitore.

Verifica rapida

Metta alla prova la sua conoscenza di expose e attrs.

Riepilogo

Punti chiave:

  • defineExpose pubblica metodi e valori selezionati al ref del genitore.
  • Gli attributi fallthrough sono attributi del genitore che non sono props né eventi.
  • useAttrs() li legge; il fallthrough automatico li applica all'elemento radice.
  • Usi inheritAttrs: false + v-bind="attrs" per reindirizzarli.

Domande Frequenti

La lezione «defineExpose e useAttrs» è gratuita?

Sì — il testo completo di «defineExpose e useAttrs» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «defineExpose e useAttrs»?

Esposizione degli elementi interni del componente con defineExpose(), useAttrs() per gli attributi fallthrough Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «defineExpose e useAttrs»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Introduzione a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importazione e utilizzo dei composable in script setup
← Torna a Vue Academy