Опції: Композиція

provide

Надавання значень, які можуть бути введені компонентами-нащадками.

Тип

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

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

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}
```
Використання функції для надавання властивостей екземпляра компонента:
js
```
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}
```
Зауважте, що в наведеному вище прикладі msg НЕ буде реактивним. Див. Робота з реактивністю для отримання додаткової інформації.
Також до вашої уваги: Надавання / введення

inject

Оголошення властивостей, які потрібно додати в поточний компонент, що будуть надаватися від предків.

Тип

interface 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, якщо не було надано ані відповідної властивості, ані значення за промовчанням.
Зауважте, що введені прив'язки НЕ реактивні. Це навмисно. Однак, якщо введене значення є реактивним об'єктом, властивості цього об'єкта залишаються реактивними. Див. Робота з реактивністю для отримання додаткової інформації.
Приклад
Основне використання:
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]
    }
  }
}
```
Також до вашої уваги: Надавання / введення

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 насамперед пов'язаний з успадкуванням.
Як і у випадку з міксинами, будь-які опції (не стосується setup()) буде об'єднано за допомогою відповідної стратегії злиття.
Приклад:
js
```
const CompA = { ... }

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

Редагувати цю сторінку на GitHub

Опції: Композиція ​

provide ​

inject ​

mixins ​

extends ​

Опції: Композиція

provide

inject

mixins

extends