Vue Academy · Урок

defineExpose и useAttrs

Предоставление внутренних элементов компонента через defineExpose(), useAttrs() для сквозных атрибутов

«defineExpose и useAttrs» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Раскрытие и передача атрибутов

Ещё два инструмента дополняют обмен данными между компонентами: defineExpose позволяет родителю обращаться к дочернему компоненту, а useAttrs предоставляет оставшиеся атрибуты, переданные родителем. Оба инструмента часто используются в повторно используемых компонентах.

Компоненты по умолчанию закрыты

При использовании <script setup> ничто внутри компонента недоступно через ссылку на него в шаблоне родителя. Такая инкапсуляция полезна, но иногда родителю действительно нужно вызвать метод дочернего компонента.

defineExpose открывает доступ

defineExpose явно предоставляет родителю выбранные методы или значения. Передайте объект с тем, чем хотите поделиться.

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

Вызов открытых методов из родителя

Родитель получает дочерний компонент через ссылку в шаблоне и вызывает открытый метод. Видимыми будут только ключи, переданные в 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>

Пример с фокусом

Открытый метод focus позволяет родителю установить фокус на поле ввода внутри пользовательского компонента, не нарушая инкапсуляцию.

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

Что такое сквозные атрибуты

Когда родитель добавляет компоненту атрибут, который не является объявленным prop или событием (например, class, id или data-*), он становится сквозным атрибутом.

Чтение attrs с помощью useAttrs

useAttrs() возвращает объект со всеми сквозными attrs. Используйте его, когда нужно изучить или перенаправить их в скрипте.

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

Автоматическая передача атрибутов

По умолчанию Vue применяет сквозные attrs к единственному корневому элементу шаблона. Если компонент содержит один корневой div, переданный родителем class автоматически попадёт на него.

Отключение автоматической передачи

Если нужно разместить attrs не на корневом элементе, а в другом месте (например, на внутреннем поле ввода в оболочке), отключите автоматическую передачу с помощью inheritAttrs: false в обычном блоке скрипта.

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

Передача attrs с помощью привязки

После отключения автоматической передачи направьте attrs на выбранный элемент с помощью v-bind="attrs". Это стандартный шаблон для оболочек полей ввода.

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

Когда что использовать

defineExpose: позволяет родителю вызывать методы дочернего компонента через ссылку в шаблоне.
useAttrs + inheritAttrs: false + v-bind: позволяет точно управлять местом размещения атрибутов, переданных родителем.

Быстрая проверка

Проверьте свои знания о раскрытии данных и attrs.

Итоги

Главное:

defineExpose предоставляет выбранные методы и значения ссылке родителя.
Сквозные attrs — это атрибуты родителя, которые не являются props или событиями.
useAttrs() считывает их, а автоматическая передача направляет их на корневой элемент.
Используйте inheritAttrs: false + v-bind="attrs", чтобы перенаправить их.

Часто задаваемые вопросы

Урок «defineExpose и useAttrs» бесплатный?

Да — полный текст урока «defineExpose и useAttrs» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «defineExpose и useAttrs»?

Предоставление внутренних элементов компонента через defineExpose(), useAttrs() для сквозных атрибутов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «defineExpose и useAttrs»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy