# Свойства экземпляра

# $data

Тип: Object
Подробности:

Объект с данными, за которыми осуществляет наблюдение экземпляр компонента. Экземпляр компонента проксирует доступ к свойствам объекта данных.
См. также: Options API / Data — data

# $props

Тип: Object
Подробности:

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

# $el

Тип: any
Только для чтения
Подробности:

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

Для компонентов использующих фрагменты, $el будет узлом DOM, с помощью которого Vue будет отслеживать место компонента в DOM. Рекомендуется использовать ссылки на элементы шаблона для доступа к элементам DOM напрямую, а не полагаться на $el.

# $options

Тип: Object
Только для чтения
Подробности:

Опции, используемые для инициализации текущего экземпляра компонента. Полезно, если потребуется добавить пользовательские свойства в опции:
```
const app = createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
```
1
2
3
4
5
6

# $parent

Тип: Экземпляр компонента
Только для чтения
Подробности:

Родительский экземпляр, если таковой имеется.

# $root

Тип: Экземпляр компонента
Только для чтения
Подробности:

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

# $slots

Тип: { [name: string]: (...args: any[]) => Array<VNode> | undefined }
Только для чтения
Подробности:

Используется для программного доступа к содержимому, распределяемому с помощью слотов. Каждый именованный слот имеет соответствующее свойство (например, содержимое v-slot:foo будет доступно через this.$slots.foo()). В свойстве default будут либо узлы, не попавшие в какой-либо именованный слот, либо содержимое v-slot:default.

Доступ к this.$slots пригодится при создании компонента с помощью render-функции.

Пример:

<blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <template v-slot:default>
    <p>
      Here's some page content, which will be included in $slots.default.
    </p>
  </template>

  <template v-slot:footer>
    <p>Copyright 2020 Evan You</p>
  </template>
</blog-post>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const app = createApp({})

app.component('blog-post', {
  render() {
    return h('div', [
      h('header', this.$slots.header()),
      h('main', this.$slots.default()),
      h('footer', this.$slots.footer())
    ])
  }
})

1
2
3
4
5
6
7
8
9
10
11

См. также:

# $refs

Тип: Object
Только для чтения
Подробности:

Объект из DOM-элементов и экземпляров компонентов, зарегистрированных с помощью атрибутов ref.

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

# $attrs

Тип: Object
Только для чтения
Подробности:

Содержит привязки атрибутов и события в родительском компоненте, которые не были распознаны (и исключены) как входные параметры компонента или пользовательские события. Если компонент не объявляет входные параметры или пользовательские события, тут будут все привязки из родительского компонента, которые через v-bind="$attrs" можно передать внутреннему компоненту — удобно при создании компонентов высшего порядка (HOC).

См. также:
- Передача обычных атрибутов
- Options API / Разное — inheritAttrs

← Разное Методы экземпляра →