Options: Композиция

provide

Предоставление значений, которые могут быть введены компонентами-потомками.

Тип

interface ComponentOptions {
  provide?: object | ((this: ComponentPublicInstance) => object)
}

Подробности
provide и inject используются вместе, чтобы позволить компоненту-предку служить инжектором зависимостей для всех своих потомков, независимо от глубины иерархии компонентов, при условии, что они находятся в одной родительской цепочке.
Опция provide должна быть либо объектом, либо функцией, возвращающей объект. Этот объект содержит свойства, которые доступны для введения в его потомков. Вы можете использовать символы в качестве ключей в этом объекте.
Пример
Пример использования:
js
```
const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}
```
Использование функции для обеспечения состояния каждого компонента:
js
```
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}
```
Обратите внимание, что в приведённом выше примере предоставленное msg не будет реактивным. Подробнее см. в разделе Работа с реактивностью.
Смотрите также Provide / Inject

inject

Объявление свойств для внедрения в текущий компонент путём их поиска в провайдерах-предках.

Тип

interface ComponentOptions {
  inject?: ArrayInjectOptions | ObjectInjectOptions
}

type ArrayInjectOptions = string[]

type ObjectInjectOptions = {
  [key: string | symbol]:
    | string
    | symbol
    | { from?: string | symbol; default?: any }
}

Подробности
Опция inject должна быть либо массивом, либо объектом:
- Массив строк или
- Объект, в котором ключами являются имена локальных привязок, а значениями:
  - Ключ (строка или символ) для поиска в доступных инъекциях, или
  - Объект, в котором:
    - Свойство from — это ключ (строка или символ), который нужно искать в доступных инъекциях
    - Свойство default используется в качестве запасного значения. Аналогично значениям по умолчанию для параметров, фабричная функция необходима для типов объектов, чтобы избежать разделения значений между несколькими экземплярами компонентов.
Инжектируемое свойство будет undefined, если не было предоставлено ни соответствующего свойства, ни значения по умолчанию.
Обратите внимание, что инжектируемые привязки НЕ являются реактивными. Это сделано намеренно. Однако если инжектируемое значение является реактивным объектом, свойства этого объекта остаются реактивными. Подробнее см. в разделе Работа с реактивностью.
Пример
Пример использования:
js
```
export default {
  inject: ['foo'],
  created() {
    console.log(this.foo)
  }
}
```
Использование инжектированного значения в качестве значения по умолчанию для параметра:
js
```
const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default() {
        return this.foo
      }
    }
  }
}
```
Использование введённого значения в качестве ввода данных:
js
```
const Child = {
  inject: ['foo'],
  data() {
    return {
      bar: this.foo
    }
  }
}
```
Инъекции могут быть необязательными со значением по умолчанию:
js
```
const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}
```
Если его нужно инжектировать из свойства с другим именем, используйте from для обозначения свойства-источника:
js
```
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}
```
Как и в случае с параметрами по умолчанию, для непервоначальных значений необходимо использовать фабричную функцию:
js
```
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}
```
Смотрите также Provide / Inject

mixins

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

Тип

interface ComponentOptions {
  mixins?: ComponentOptions[]
}

Подробности
Опция mixins принимает массив объектов примесей. Эти объекты могут содержать как опции экземпляра, так и обычные объекты экземпляра, и они будут объединены с конечными опциями, используя определённую логику объединения опций. Например, если ваша примесь содержит хук created, а сам компонент также имеет такой хук, будут вызваны обе функции.
Хуки примесей вызываются в том порядке, в котором они были предоставлены, и вызываются перед собственными хуками компонента.
Больше не рекомендуется
В Vue 2 примеси были основным механизмом для создания многократно используемых фрагментов логики компонентов. Хотя примеси продолжают поддерживаться во Vue 3, Композаблы теперь являются предпочтительным подходом для повторного использования кода между компонентами.

Пример

const mixin = {
  created() {
    console.log(1)
  }
}

createApp({
  created() {
    console.log(2)
  },
  mixins: [mixin]
})

// => 1
// => 2

extends

Базовый класс компонента для расширения.

Тип

interface ComponentOptions {
  extends?: ComponentOptions
}

Подробности
Позволяет одному компоненту расширять другой, наследуя его параметры.
С точки зрения реализации, extends практически идентичен mixins. Компонент, указанный в extends, будет рассматриваться так, как если бы он был первой примесью.
Однако extends и mixins выражают разные намерения. Опция mixins используется в основном для компоновки кусков функциональности, в то время как extends в основном занимается наследованием.
Как и в случае с mixins, любые опции (кроме setup()) будут объединены с использованием соответствующей стратегии объединения.
Пример
js
```
const CompA = { ... }

const CompB = {
  extends: CompA,
  ...
}
```
Не рекомендуется для Composition API
extends предназначен для Options API и не обрабатывает объединение хуков setup().
В Composition API предпочтительной ментальной моделью повторного использования логики является «композиция», а не «наследование». Если у вас есть логика из компонента, которую необходимо повторно использовать в другом, рассмотрите возможность извлечения соответствующей логики в композаблы.
Если вы по-прежнему намерены «расширить» компонент с помощью Composition API, вы можете вызвать setup() базового компонента в setup() расширяющего компонента:
js
```
import Base from './Base.js'
export default {
  extends: Base,
  setup(props, ctx) {
    return {
      ...Base.setup(props, ctx)
      // локальные привязки
    }
  }
}
```

Редактировать эту страницу на GitHub

Options: Композиция ​

provide ​

inject ​

mixins ​

extends ​

Options: Композиция

provide

inject

mixins

extends