Экземпляр компонента
Информация
На этой странице описаны встроенные свойства и методы, доступные в общедоступном экземпляре компонента, т.е. this
.
Все свойства, перечисленные на этой странице, доступны только для чтения (за исключением вложенных свойств в $data
).
$data
Объект, возвращённый из параметра data
, который компонент сделал реактивным. Экземпляр компонента проксирует доступ к свойствам объекта данных.
Тип
tsinterface ComponentPublicInstance { $data: object }
$props
Объект, содержащий текущие входные параметры, которые получил компонент.
Тип
tsinterface ComponentPublicInstance { $props: object }
Подробности
Будут включены только параметры, объявленные с помощью опции
props
. Экземпляр компонента предоставляет прокси-доступ к свойствам своего объекта props.
$el
Корневой узел DOM, которым управляет экземпляр компонента.
Тип
tsinterface ComponentPublicInstance { $el: Node | undefined }
Подробности
$el
будетundefined
, пока компонент не будет смонтирован.- Для компонентов с одним корневым элементом,
$el
будет указывать на этот элемент. - Для компонентов с текстовым корнем
$el
будет указывать на текстовый узел. - Для компонентов с несколькими корневыми узлами
$el
будет узлом-заполнителем DOM, который Vue использует для отслеживания позиции компонента в DOM (текстовый узел или узел комментария в режиме гидратации SSR).
Совет
Для обеспечения согласованности рекомендуется использовать ссылки на шаблон для прямого доступа к элементам вместо того, чтобы полагаться на
$el
.- Для компонентов с одним корневым элементом,
$options
Разрешенные параметры компонента, используемые для создания экземпляра текущего компонента.
Тип
tsinterface ComponentPublicInstance { $options: ComponentOptions }
Подробности
Объект
$options
раскрывает разрешенные опции для текущего компонента и является результатом слияния этих возможных источников:- Глобальные миксины
- Компонент
расширяемый
базовый - Компонентные миксины
Обычно он используется для поддержки пользовательских параметров компонента:
jsconst app = createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } })
См. также
app.config.optionMergeStrategies
$parent
Родительский экземпляр, если у текущего экземпляра он есть. Для самого корневого экземпляра это будет null
.
Тип
tsinterface ComponentPublicInstance { $parent: ComponentPublicInstance | null }
$root
Экземпляр корневого компонента текущего дерева компонентов. Если у текущего экземпляра нет родителя, то значением будет он сам.
Тип
tsinterface ComponentPublicInstance { $root: ComponentPublicInstance }
$slots
Объект, представляющий слоты, передаваемый родительским компонентом.
Тип
tsinterface ComponentPublicInstance { $slots: { [name: string]: Slot } } type Slot = (...args: any[]) => VNode[]
Подробности
Обычно используется при ручном создании функций рендеринга, но также может использоваться для определения наличия слота.
Каждый слот отображается в
this.$slots
как функция, которая возвращает массив узлов под ключом, соответствующим имени этого слота. Слот по умолчанию отображается какthis.$slots.default
.Если слот является слотом с ограниченной областью действия, аргументы, переданные функциям слота, доступны слоту в качестве входных параметров слота.
См. также Функции рендеринга — слоты рендеринга
$refs
Объект элементов DOM и экземпляров компонентов, зарегистрированный через ссылки на шаблон.
Тип
tsinterface ComponentPublicInstance { $refs: { [name: string]: Element | ComponentPublicInstance | null } }
См. также
$attrs
Объект, содержащий атрибуты Fallthrough компонента.
Тип
tsinterface ComponentPublicInstance { $attrs: object }
Подробности
Атрибуты Fallthrough это атрибуты и обработчики событий, передаваемые родительским компонентом, но не объявленные дочерним компонентом как prop или событие, передаваемое дочерним компонентом.
По умолчанию все, что содержится в
$attrs
, будет автоматически унаследовано в корневом элементе компонента, если существует только один корневой элемент. Это поведение отключено, если компонент имеет несколько корневых узлов, и может быть явно отключено с помощью опцииinheritAttrs
.См. также
$watch()
Императивный API для создания наблюдателей.
Тип
tsinterface ComponentPublicInstance { $watch( source: string | (() => any), callback: WatchCallback, options?: WatchOptions ): StopHandle } type WatchCallback<T> = ( value: T, oldValue: T, onCleanup: (cleanupFn: () => void) => void ) => void interface WatchOptions { immediate?: boolean // default: false deep?: boolean // default: false flush?: 'pre' | 'post' | 'sync' // default: 'pre' onTrack?: (event: DebuggerEvent) => void onTrigger?: (event: DebuggerEvent) => void } type StopHandle = () => void
Подробности
Первый аргумент - это источник наблюдения. Это может быть строка имени свойства компонента, простая строка пути, разделенная точкой, или getter функция.
Второй аргумент - это коллбэк. Обратный вызов получает новое значение и старое значение наблюдаемого источника.
immediate
: коллбэк запускается сразу после создания наблюдателя. Старое значение будетundefined
при первом вызове.deep
: принудительный глубокий обход источника, если это объект, так что обратный вызов срабатывает при глубоких мутациях. Смотрите Глубокие наблюдатели.flush
: настройте время очистки коллбэка. См. раздел Тайминг очистки коллбэка иwatchEffect()
.onTrack / onTrigger
: Для отладки зависимостей наблюдателя. См. Отладка наблюдателя.
Пример
Наблюдение за именем свойства:
jsthis.$watch('a', (newVal, oldVal) => {})
Наблюдение за путём, разделенный точками:
jsthis.$watch('a.b', (newVal, oldVal) => {})
Использование getter для более сложных выражений:
jsthis.$watch( // каждый раз, когда выражение `this.a + this.b` дает // другой результат, будет вызываться обработчик. // Это как если бы наблюдали за вычисляемым свойством. // не определяя само вычисляемое свойство. () => this.a + this.b, (newVal, oldVal) => {} )
Остановка наблюдателя:
jsconst unwatch = this.$watch('a', cb) // later... unwatch()
См. также
$emit()
Запуск пользовательского события на текущем экземпляре. Любые дополнительные аргументы будут переданы в функцию коллбэка слушателя.
Тип
tsinterface ComponentPublicInstance { $emit(event: string, ...args: any[]): void }
Пример
jsexport default { created() { // только определяя имя события: this.$emit('foo') // с передачей дополнительных аргументов: this.$emit('bar', 1, 2, 3) } }
См. также
$forceUpdate()
Вызывает принудительную перерисовку экземпляра компонента.
Тип
tsinterface ComponentPublicInstance { $forceUpdate(): void }
Подробности
Ввиду полностью автоматической системы реактивности во Vue это требуется крайне редко. Единственный случай, когда она может понадобиться, это когда вы явно создали нереактивное состояние компонента, используя расширенные API реактивности.
$nextTick()
Откладывает вызов коллбэка до следующего цикла обновления DOM. Используйте его сразу после изменения данных, чтобы дождаться обновления DOM. nextTick()
.
Тип
tsinterface ComponentPublicInstance { $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void> }
Подробности
Единственное отличие от глобальной версии
nextTick()
заключается в том, что коллбэк, переданныйthis.$nextTick()
, будет иметь контекстthis
, привязанный к текущему экземпляру компонента.См. также
nextTick()