Опції: Композиція
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
НЕ буде реактивним. Див. Робота з реактивністю для отримання додаткової інформації.Також до вашої уваги: Надавання / введення
inject
Оголошення властивостей, які потрібно додати в поточний компонент, що будуть надаватися від предків.
Тип
tsinterface ComponentOptions { inject?: ArrayInjectOptions | ObjectInjectOptions } type ArrayInjectOptions = string[] type ObjectInjectOptions = { [key: string | symbol]: | string | symbol | { from?: string | symbol; default?: any } }
Подробиці
Параметр
inject
має бути:- Масивом рядків, або
- Об'єктом, де ключі є назвою локального зв'язування, а значенням є:
- Ключ (рядок або Symbol) для пошуку в доступних введеннях або
- Об'єкт, де:
- Властивість
from
— це ключ (рядок або Symbol) для пошуку в доступних введеннях, і - Властивість
default
використовується як резервне значення. Подібно до значень реквізитів за промовчанням, заводська функція потрібна для типів об'єктів, щоб уникнути спільного використання значення між кількома екземплярами компонентів.
- Властивість
Введена властивість буде
undefined
, якщо не було надано ані відповідної властивості, ані значення за промовчанням.Зауважте, що введені прив'язки НЕ реактивні. Це навмисно. Однак, якщо введене значення є реактивним об'єктом, властивості цього об'єкта залишаються реактивними. Див. Робота з реактивністю для отримання додаткової інформації.
Приклад
Основне використання:
jsexport default { inject: ['foo'], created() { console.log(this.foo) } }
Використання введеного значення як реквізиту за промовчанням:
jsconst Child = { inject: ['foo'], props: { bar: { default() { return this.foo } } } }
Використання введеного значення як дані:
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] } } }
Також до вашої уваги: Надавання / введення
mixins
Масив параметрів об'єктів, які потрібно змішати з поточним компонентом.
Тип
tsinterface ComponentOptions { mixins?: ComponentOptions[] }
Подробиці:
Параметр
mixins
приймає масив міксинів об'єктів. Ці міксини об'єктів можуть містити параметри екземплярів, як звичайні об'єкти екземплярів, і вони будуть об'єднані в остаточний набір параметрів із використанням спеціальної логіки об'єднання. Наприклад, якщо ваш міксин містить хукcreated
і сам компонент також його має, то буде викликано обидві функції.Хуки міксинів викликаються в тому порядку, в якому вони надані, і викликаються до виклику власних хуків компонента.
Більше не рекомендується
У Vue 2 міксини були основним механізмом для створення повторно використовуваних фрагментів логіки компонентів. Хоча міксини продовжують підтримуватися у Vue 3, тепер Композиційний АРІ є кращим підходом для повторного використання коду між компонентами.
Приклад:
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
насамперед пов'язаний з успадкуванням.Як і у випадку з міксинами, будь-які опції (не стосується
setup()
) буде об'єднано за допомогою відповідної стратегії злиття.Приклад:
jsconst CompA = { ... } const CompB = { extends: CompA, ... }
Не рекомендовано для Композиційного API
extends
розроблено для Опційного API та не обробляє об'єднання хукаsetup()
.В Композиційному API бажаною ментальною моделлю для повторного використання логіки є «складання» над «успадкуванням». Якщо у вас є логіка з компонента, який потрібно повторно використовувати в іншому, подумайте про виділення відповідної логіки в Композиційних функціях.
Якщо ви все ще маєте намір «розширити» компонент за допомогою Композиційного API, ви можете викликати
setup()
базового компонента вsetup()
компонента розширення:jsimport Base from './Base.js' export default { extends: Base, setup(props, ctx) { return { ...Base.setup(props, ctx), // локальні прив'язки } } }