Provide / Inject ​

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

Пробрасывание входных параметров ​

Обычно для передачи данных от родительского компонента в дочерний используются входные параметры. Представьте структуру, в которой будет несколько глубоко вложенных компонентов и потребуется что-то от родительского компонента в глубоко вложенном дочернем. В таком случае необходимо передавать входные параметры вниз по всей цепочке компонентов, что может быть очень неудобным.

Обратите внимание, хотя компоненту <Footer> не нужны входные параметры, ему все равно необходимо объявить и передать их, чтобы <DeepChild> мог получить к ним доступ. Если есть более длинная родительская цепочка, по пути будет затронуто больше компонентов. Это называется "пробрасывание входных параметров", и с этим определенно не весело иметь дело.

В таких случаях можно использовать пару provide и inject. Родительские компоненты могут служить провайдерами зависимостей для всех своих потомков. Любой компонент в дереве-потомке, независимо от его глубины, может внедрить зависимости, предоставляемые компонентами, расположенными выше в его родительской цепочке.

Provide ​

<script setup>
import { provide } from 'vue'

provide(/* ключ */ 'message', /* значение */ 'привет!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* ключ */ 'message', /* значение */ 'привет!')
  }
}

import { ref, provide } from 'vue'

const count = ref(0)
provide('key', count)

export default {
  provide: {
    message: 'привет!'
  }
}

export default {
  data() {
    return {
      message: 'привет!'
    }
  },
  provide() {
    // используйте синтаксис функции, чтобы получить доступ к `this`
    return {
      message: this.message
    }
  }
}

Предоставление на уровне приложения ​

Помимо предоставления данных в компоненте, мы также можем предоставлять их на уровне приложения:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* ключ */ 'message', /* значение */ 'привет!')

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

Inject ​

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // внедрённое значение
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // исходные данные на основе внедрённого значения
      fullMessage: this.message
    }
  }
}

export default {
  inject: {
    /* локальный ключ */ localMessage: {
      from: /* внедряемый ключ */ 'message'
    }
  }
}

Значения по умолчанию для инъекций ​

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

Если мы хотим, чтобы инжектируемое свойство работало с необязательными провайдерами, нам необходимо объявить значение по умолчанию, аналогично входным параметрам:

// `value` будет "значением по умолчанию"
// если данные, соответствующие "message", не были предоставлены
const value = inject('message', 'default value')

const value = inject('key', () => new ExpensiveClass(), true)

export default {
  // необходим синтаксис объекта
  // при объявлении значений по умолчанию для инъекций
  inject: {
    message: {
      from: 'message', // это необязательно, если для инъекций используется один и тот же ключ
      default: 'default value'
    },
    user: {
      // используйте фабричную функцию для непримитивных значений, которые дороги
      // для создания или те, которые должны быть уникальными для каждого экземпляра компонента.
      default: () => ({ name: 'John' })
    }
  }
}

Работа с реактивностью ​

<!-- внутри компонента провайдер -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

<!-- в компоненте injector -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'привет!'
    }
  },
  provide() {
    return {
      // явно указываем вычисляемое свойство
      message: computed(() => this.message)
    }
  }
}

Работа с символьными ключами ​

До сих пор в примерах мы использовали ключи инъекции строк. Если вы работаете в большом приложении с большим количеством поставщиков зависимостей или создаете компоненты, которые будут использоваться другими разработчиками, лучше всего использовать ключи инъекции символов, чтобы избежать возможных коллизий.

Рекомендуется экспортировать символы в отдельный файл:

// keys.js
export const myInjectionKey = Symbol()

// в компоненте provider
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* данные для предоставления */
})

// в компоненте injector
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

// в компоненте provider
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* данные для предоставления */
      }
    }
  }
}

// в компоненте injector
import { myInjectionKey } from './keys.js'

export default {
  inject: {
    injected: { from: myInjectionKey }
  }
}