0Pricing
Vue Academy · Lekcja

defineExpose i useAttrs

Udostępnianie elementów wewnętrznych komponentu za pomocą defineExpose(), useAttrs() dla atrybutów przekazywanych dalej.

defineExpose i useAttrs to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Udostępnianie i przekazywanie

Dwa kolejne narzędzia uzupełniają komunikację między komponentami: defineExpose pozwala rodzicowi uzyskać dostęp do wnętrza komponentu potomnego, a useAttrs udostępnia pozostałe atrybuty przekazane przez rodzica. Oba są często używane w komponentach wielokrotnego użytku.

Komponenty są domyślnie zamknięte

W przypadku <script setup> nic wewnątrz komponentu nie jest dostępne za pośrednictwem template ref w szablonie rodzica. Taka hermetyzacja jest korzystna, ale czasami rodzic musi wywołać metodę komponentu potomnego.

defineExpose otwiera dostęp

defineExpose jawnie udostępnia rodzicowi wybrane metody lub wartości. Przekaż obiekt zawierający elementy, które chcesz udostępnić.

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

Wywoływanie udostępnionych metod z rodzica

Rodzic pobiera komponent potomny za pomocą template ref i wywołuje udostępnioną metodę. Widoczne są tylko klucze przekazane do 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>

Przykład ustawiania fokusu

Udostępnienie metody focus pozwala rodzicowi ustawić fokus na polu input wewnątrz niestandardowego komponentu bez naruszania hermetyzacji.

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

Czym są atrybuty fallthrough?

Gdy rodzic umieści w komponencie atrybut, który nie jest zadeklarowanym prop ani zdarzeniem (na przykład class, id lub data-*), staje się on atrybutem fallthrough.

Odczytywanie attrs za pomocą useAttrs

useAttrs() zwraca obiekt zawierający wszystkie atrybuty fallthrough. Używaj go, gdy trzeba je sprawdzić lub przenieść w skrypcie.

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

Automatyczne przekazywanie atrybutów

Domyślnie Vue stosuje atrybuty fallthrough do pojedynczego elementu głównego szablonu. Jeśli komponent ma jeden główny element div, przekazany przez rodzica class automatycznie trafi właśnie tam.

Wyłączanie automatycznego przekazywania

Jeśli chcesz umieścić attrs w innym miejscu niż element główny (na przykład na wewnętrznym polu input w komponencie opakowującym), wyłącz automatyczne przekazywanie za pomocą inheritAttrs: false w zwykłym bloku skryptu.

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

Przekazywanie attrs za pomocą v-bind

Po wyłączeniu automatycznego przekazywania przekaż attrs do wybranego elementu za pomocą v-bind="attrs". To standardowy wzorzec dla komponentów opakowujących pola input.

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

Kiedy używać poszczególnych narzędzi

  • defineExpose: pozwala rodzicowi wywoływać metody komponentu potomnego za pomocą template ref.
  • useAttrs + inheritAttrs: false + v-bind: zapewnia pełną kontrolę nad miejscem, do którego trafiają atrybuty przekazane przez rodzica.

Szybkie sprawdzenie

Sprawdź swoją wiedzę o expose i attrs.

Podsumowanie

Najważniejsze informacje:

  • defineExpose udostępnia wybrane metody i wartości za pośrednictwem ref rodzica.
  • Atrybuty fallthrough to atrybuty rodzica, które nie są props ani zdarzeniami.
  • useAttrs() pozwala je odczytać, a automatyczne przekazywanie kieruje je do elementu głównego.
  • Użyj inheritAttrs: false + v-bind="attrs", aby przekierować te atrybuty.

Często zadawane pytania

Czy lekcja „defineExpose i useAttrs” jest bezpłatna?

Tak — pełny tekst „defineExpose i useAttrs” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „defineExpose i useAttrs”?

Udostępnianie elementów wewnętrznych komponentu za pomocą defineExpose(), useAttrs() dla atrybutów przekazywanych dalej. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „defineExpose i useAttrs”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wprowadzenie do script setup
  2. defineProps i defineEmits
  3. defineExpose i useAttrs
  4. Importowanie i używanie composables w script setup
← Powrót do Vue Academy