Екземпляр компонента
Примітка
Ця сторінка документує вбудовані властивості та методи, доступні для загальнодоступного екземпляра компонента, тобто this
.
Усі властивості, перелічені на цій сторінці, доступні лише для читання (крім вкладених властивостей у $data
).
$data
Об’єкт, повернутий параметром data
, зроблений реактивним компонентом. Екземпляр компонента проксує доступ до властивостей об'єкта даних.
Тип
tsinterface ComponentPublicInstance { $data: object }
$props
Об’єкт, що представляє поточні дозволені реквізити компонента.
Тип
tsinterface ComponentPublicInstance { $props: object }
Подробиці
Будуть включені лише реквізити, оголошені за допомогою параметра
props
. Екземпляр компонента проксує доступ до властивостей об'єкта реквізитів.
$el
Кореневий вузол DOM, яким керує екземпляр компонента.
Тип
tsinterface ComponentPublicInstance { $el: Node | undefined }
Подробиці
$el
будеundefined
, доки компонент не буде змонтовано.- Для компонентів з одним кореневим елементом
$el
вказуватиме на цей елемент. - Для компонентів із текстовим коренем
$el
вказуватиме на текстовий вузол. - Для компонентів із кількома кореневими вузлами
$el
буде підмінним елементом DOM вузла, який Vue використовує для відстеження позиції компонента в DOM (текстовий вузол або вузол коментаря в режимі SSR гідратації).
Порада:
Для узгодженості рекомендується використовувати посилання шаблону для прямого доступу до елементів замість того, щоб покладатися на
$el
.- Для компонентів з одним кореневим елементом
$options
Вирішені параметри компонента, які використовуються для створення екземпляра поточного компонента.
Тип
tsinterface ComponentPublicInstance { $options: ComponentOptions }
Подробиці
Об’єкт
$options
відкриває дозволені параметри для поточного компонента та є результатом злиття цих можливих джерел:- Глобальні міксини
- Компонент з
extends
- Компонентні міксини
Зазвичай він використовується для підтримки користувацьких параметрів компонента:
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
як функція, яка повертає масив vnodes під ключем, що відповідає назві цього слота. Слот за промовчанням представлено якthis.$slots.default
.Якщо слот є слотом з областю дії, аргументи, передані функціям слота, доступні для слота як його атрибути.
Також до вашої уваги: Функції рендерингу - рендеринг слотів
$refs
Об’єкт елементів DOM і екземплярів компонентів, зареєстрованих через посилання шаблону.
Тип
tsinterface ComponentPublicInstance { $refs: { [name: string]: Element | ComponentPublicInstance | null } }
Також до вашої уваги:
$attrs
Об’єкт, який містить прохідні атрибути компонента.
Тип
tsinterface ComponentPublicInstance { $attrs: object }
Подробиці
Прохідні атрибути — це атрибути та обробники подій, які передаються батьківським компонентом, але не оголошуються дочірнім компонентом як реквізит або випромінювач події.
За промовчанням усе в
$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 // за промовчанням: false deep?: boolean // за промовчанням: false flush?: 'pre' | 'post' | 'sync' // за промовчанням: '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) // пізніше... 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()
Екземпляр прив'язаний до глобальної версії nextTick()
.
Тип
tsinterface ComponentPublicInstance { $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void> }
Подробиці
Єдина відмінність від глобальної версії
nextTick()
полягає в тому, що зворотний виклик, переданийthis.$nextTick()
, матиме контекстthis
, прив'язаний до поточного екземпляра компонента.Також до вашої уваги:
nextTick()