Опции: Композиция
provide
Предоставляет значения, которые могут быть внедрены компонентами-потомками.
Тип
tsinterface ComponentOptions { provide?: object | ((this: ComponentPublicInstance) => object) }
Подробности
provide
иinject
используются вместе для того, чтобы компонент-предок мог служить инжектором зависимостей для всех своих потомков, насколько глубока иерархия компонентов, если они находятся в одной родительской цепочке.Параметр
provide
должен быть либо объектом, либо функцией, которая возвращает объект. Этот объект содержит свойства, которые после ввода будут доступны в потомках. Вы можете использовать Symbols в качестве ключей в этом объекте.Пример
Базовое использование:
jsconst s = Symbol() export default { provide: { foo: 'foo', [s]: 'bar' } }
Использование функции для предоставления состояния каждому компоненту:
jsexport default { data() { return { msg: 'foo' } } provide() { return { msg: this.msg } } }
Обратите внимание, что в приведенном примере предоставленное для внедрения свойство
msg
НЕ будет реактивным. Подробнее об этом см. в разделе Работа с реактивностью.См. также Provide / Inject
inject
Объявление свойств для внедрения в текущий компонент, которые описаны через provide в компонентах-предках.
Тип
tsinterface ComponentOptions { inject?: ArrayInjectOptions | ObjectInjectOptions } type ArrayInjectOptions = string[] type ObjectInjectOptions = { [key: string | symbol]: | string | symbol | { from?: string | symbol; default?: any } }
Подробности
Опция
inject
должна быть:- Массивом строк, или
- Объект, ключами которого являются имена локальных свойств для привязки, а значениями:
- Ключ (строка или символ) для поиска в доступных внедрениях, или
- Обьектом, в котором:
- Свойство
from
- это ключ (строка или символ) для поиска в доступных внедрениях, и - В качестве запасного значения используется свойство
default
. Аналогично значениям по умолчанию для входных параметров, для типов объектов необходима функцию-фабрику, чтобы избежать совместного использования значений несколькими экземплярами компонентов.
- Свойство
Внедряемое свойство будет иметь значение
undefined
, если не было предоставлено для внедрения ни соответствующего свойства, ни значения по умолчанию.Обратите внимание, что внедряемые зависимости НЕ являются реактивными. Это сделано намеренно. Однако если внедряемое значение является реактивным объектом, то свойства этого объекта остаются реактивными. Подробнее об этом см. в разделе Работа с реактивностью.
Пример
Основное использование:
jsexport default { inject: ['foo'], created() { console.log(this.foo) } }
Использование внедренного значения в качестве значения по умолчанию для входного параметра:
jsconst Child = { inject: ['foo'], props: { bar: { default() { return this.foo } } } }
Использование инжектированного значения в качестве свойства data:
jsconst Child = { inject: ['foo'], data() { return { bar: this.foo } } }
Внедренные значения могут быть необязательными со значением по умолчанию:
jsconst Child = { inject: { foo: { default: 'foo' } } }
Если его необходимо внедрить из свойства с другим именем, используйте
from
для обозначения свойства-источника:jsconst Child = { inject: { foo: { from: 'bar', default: 'foo' } } }
Аналогично значению по умолчанию в входных параметрах для не примитивных значений необходимо использовать функцию-фабрику:
jsconst Child = { inject: { foo: { from: 'bar', default: () => [1, 2, 3] } } }
См. также Provide / Inject
mixins
Массив опций, которые будут подмешаны в текущий компонент.
Тип
tsinterface ComponentOptions { mixins?: ComponentOptions[] }
Подробности
Опция
mixins
принимает массив объектов примесей. Эти объекты примесей могут содержать опции экземпляра, как и обычные объекты экземпляра, и они будут объединены с конечными опциями, используя определенную логику объединения опций. Например, если ваш миксин содержит хукcreated
, а сам компонент также имеет такой хук, то будут вызваны обе функции.Хуки миксинов вызываются в том порядке, в котором они были предоставлены, и вызываются перед собственными хуками компонента.
Больше не рекомендуется
Во Vue 2 миксины были основным механизмом для создания многократно используемых фрагментов логики компонентов. Хотя миксины продолжают поддерживаться во Vue 3, Composition API теперь является предпочтительным подходом для повторного использования кода между компонентами.
Пример
jsconst mixin = { created() { console.log(1) } } createApp({ created() { console.log(2) }, mixins: [mixin] }) // => 1 // => 2
extends
Расширение для компонента "базового класса".
Тип
tsinterface ComponentOptions { extends?: ComponentOptions }
Подробности
Позволяет одному компоненту расширять другой, наследуя его опции.
С точки зрения реализации,
extends
практически идентиченmixins
. Компонент, указанныйextends
, будет рассматриваться так же, как если бы он был первым миксином.Однако
extends
иmixins
выражают разные цели. Опцияmixins
используется в основном для компоновки функциональных блоков, в то время какextends
в основном связана с наследованием.Как и в случае с
mixins
, любые варианты (кромеsetup()
) будут объединены с использованием соответствующей стратегии слияния.Пример
jsconst CompA = { ... } const CompB = { extends: CompA, ... }
Не рекомендуется для Composition API
extends
предназначен для Options API и не обрабатывает объединение хуковsetup()
.В Composition API предпочтительной ментальной моделью для повторного использования логики является "композиция", а не "наследование". Если у вас есть логика одного компонента, которую нужно повторно использовать в другом компоненте, подумайте о том, чтобы извлечь соответствующую логику в Composable.
Если вы всё же собираетесь "расширить" компонент с помощью Composition API, вы можете вызвать
setup()
базового компонента вsetup()
расширяемого компонента:jsimport Base from './Base.js' export default { extends: Base, setup(props, ctx) { return { ...Base.setup(props, ctx), // локальные привязки } } }