Экземпляр компонента ​

$data ​

Объект, возвращаемый из свойства data, на который реагирует компонент. Экземпляр компонента проксирует доступ к свойствам своего объекта данных.

• Тип

  ts

  interface ComponentPublicInstance {
    $data: object
  }

$props ​

Объект, представляющий текущий, разрешённый параметр компонента.

• Тип

  ts

  interface ComponentPublicInstance {
    $props: object
  }

• Подробности

  Будут включены только параметры, объявленные с помощью свойства props. Экземпляр компонента проксирует доступ к свойствам на своем объекте props.

$el ​

Корневой узел DOM, которым управляет экземпляр компонента.

• Тип

  ts

  interface ComponentPublicInstance {
    $el: any
  }

• Подробности

  $el будет неопределённым (undefined) до тех пор, пока компонент не будет смонтирован.

  • Для компонентов с одним корневым элементом $el будет указывать на этот элемент.
  • Для компонентов с корневым текстовым узлом, $el будет указывать на текстовый узел.
  • Для компонентов с несколькими корневыми узлами $el будет узлом-заполнителем DOM, который Vue использует для отслеживания позиции компонента в DOM (текстовый узел или узел комментария в режиме гидратации SSR).

  Совет

  Для согласованности рекомендуется использовать ссылки на элементы шаблона для прямого доступа к элементам, а не полагаться на $el.

$options ​

Разрешённые параметры компонента, используемые для инстанцирования текущего экземпляра компонента.

• Тип

  ts

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• Подробности

  Объект $options отображает разрешённые опции для текущего компонента и является результатом слияния всех возможных источников:

  • Глобальные примеси
  • Компонент, расширяющий (extends) базовый
  • Примеси компонента

  Обычно он используется для поддержки пользовательских опций компонентов:

  js

  const app = createApp({
    customOption: 'foo',
    created() {
      console.log(this.$options.customOption) // => 'foo'
    }
  })

• Смотрите также app.config.optionMergeStrategies

$parent ​

Родительский экземпляр, если у текущего экземпляра он есть. Для самого корневого экземпляра это будет null.

• Тип

  ts

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root ​

Экземпляр корневого компонента текущего дерева компонентов. Если у текущего экземпляра нет родителей, это значение будет равно самому себе.

• Тип

  ts

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots ​

Объект, представляющий слоты, переданные родительским компонентом.

• Тип

  ts

  interface ComponentPublicInstance {
    $slots: { [name: string]: Slot }
  }
  
  type Slot = (...args: any[]) => VNode[]

• Подробности

  Обычно используется при ручном создании рендер-функций, но также может использоваться для определения наличия слота.

  Каждый слот отображается на this.$slots в виде функции, которая возвращает массив виртуальных узлов под ключом, соответствующим имени слота. Слот по умолчанию отображается как this.$slots.default.

  Если слот является слотом с ограниченной областью видимости, то аргументы, переданные в функции слота, доступны слоту как его параметры.

• Смотрите также Рендер-функции - Отрисовка слотов

$refs ​

Объект элементов DOM и экземпляров компонентов, зарегистрированных через ссылки на элементы шаблона.

• Тип

  ts

  interface ComponentPublicInstance {
    $refs: { [name: string]: Element | ComponentPublicInstance | null }
  }

• Смотрите также

  • Ссылки на элементы шаблона
  • Специальные атрибуты - ref

$attrs ​

Объект, содержащий передаваемые атрибуты компонента.

• Тип

  ts

  interface ComponentPublicInstance {
    $attrs: object
  }

• Подробности

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

  По умолчанию всё, что содержится в $attrs, будет автоматически наследоваться корневым элементом компонента, если корневой элемент только один. Это поведение отключается, если компонент имеет несколько корневых узлов, и может быть явно отключено с помощью опции inheritAttrs.

• Смотрите также

  • Передаваемые атрибуты

$watch() ​

Императивный API для создания наблюдателей.

• Тип

  ts

  interface 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

• Подробности

  Первый аргумент — это source. Это может быть строка имени свойства компонента, простая строка пути, разделённая точками, или функция-геттер.

  Второй аргумент — функция обратного вызова. Обратный вызов получает новое значение и старое значение наблюдаемого источника.

  • immediate: запуск обратного вызова непосредственно при создании наблюдателя. При первом вызове старое значение будет undefined.
  • deep: принудительный глубокий обход источника, если он является объектом, чтобы обратный вызов срабатывал при глубоких мутациях. Смотрите главу Глубокие наблюдатели.
  • flush: регулировка времени сброса обратного вызова. См. Время сброса обратного вызова и watchEffect().
  • onTrack / onTrigger: отладка зависимостей наблюдателя. См. раздел Отладка наблюдателей.

• Пример

  Следим за именем свойства:

  js

  this.$watch('a', (newVal, oldVal) => {})

  Следим за путём, использующим точку:

  js

  this.$watch('a.b', (newVal, oldVal) => {})

  Использование метода получения для более сложных выражений:

  js

  this.$watch(
    // Каждый раз, когда выражение `this.a + this.b` дает
    // другой результат, будет вызываться обработчик.
    // Это как если бы мы наблюдали за вычисляемым свойством,
    // не определяя само вычисляемое свойство.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  Остановка наблюдателя:

  js

  const unwatch = this.$watch('a', cb)
  
  // позже...
  unwatch()

• Смотрите также

  • Options - watch
  • Руководство - Наблюдатели

$emit() ​

Запуск пользовательского события на текущем экземпляре. Любые дополнительные аргументы будут переданы в функцию обратного вызова слушателя.

• Тип

  ts

  interface ComponentPublicInstance {
    $emit(event: string, ...args: any[]): void
  }

• Пример

  js

  export default {
    created() {
      // только событие
      this.$emit('foo')
      // с дополнительными аргументами
      this.$emit('bar', 1, 2, 3)
    }
  }

• Смотрите также

  • Компоненты - События
  • Свойство emits

$forceUpdate() ​

Принудительное повторное отображение экземпляра компонента.

• Тип

  ts

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• Подробности

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

$nextTick() ​

Привязанная к экземпляру версия глобального nextTick().

• Тип

  ts

  interface ComponentPublicInstance {
    $nextTick(
      callback?: (this: ComponentPublicInstance) => void
    ): Promise<void>
  }

• Подробности

  Единственное отличие от глобальной версии nextTick() заключается в том, что обратный вызов, переданный в this.$nextTick(), будет иметь контекст this, привязанный к текущему экземпляру компонента.

• Смотрите также nextTick()