provide() в родительских компонентах
Передача примитивных значений, реактивных ссылок и объектов — сохранение реактивности через provide
«provide() в родительских компонентах» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Функция provide
Vue provide позволяет компоненту предложить данные всем своим потомкам. Вызовите её в <script setup>, указав ключ и значение.
import { provide } from "vue";
provide("message", "Hello from ancestor");Внедрить значение может любой потомок
После передачи данных любой компонент, расположенный ниже в дереве, может внедрить тот же ключ с помощью inject — независимо от глубины вложенности, без каких-либо действий со стороны промежуточных компонентов.
App (provides "message")
-> ... -> DeepChild (injects "message")Передача реактивного состояния
Чтобы сохранить реактивность потомков, передавайте ref (или реактивный объект), а не обычное значение. Изменения ref автоматически распространяются на всех потребителей.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);Реактивность распространяется вниз
Когда предок изменяет theme.value, каждый внедривший это значение потомок повторно отображается с новым значением. Это главное преимущество по сравнению с передачей статического снимка.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Защита состояния от записи
По умолчанию потомок может изменить внедрённый ref, из-за чего изменения состояния распределяются по разным местам и нарушается однонаправленный поток данных. Оберните значение в readonly(), чтобы потребители могли его читать, но не изменять.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Передача функций как действий
Чтобы позволить потомкам запрашивать изменения, передайте функцию вместе с состоянием, доступным только для чтения. Потребители вызывают функцию, а исходное значение изменяет только поставщик.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Объединение состояния и действий
Удобный шаблон — передавать один объект с состоянием, доступным только для чтения, и его действиями, подобно небольшому хранилищу.
provide("userStore", {
user: readonly(user),
updateName
});provide на уровне приложения
Можно также выполнять provide на уровне приложения, чтобы значение было доступно каждому компоненту; такая настройка выполняется один раз для экземпляра приложения. (Подробно это рассматривается далее.)
app.provide("appName", "CoddyKit");Ключи Symbol для предотвращения конфликтов
Строковые ключи могут конфликтовать в больших приложениях. Используйте экспортируемый из общего модуля Symbol как ключ, чтобы гарантировать уникальность.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Когда использовать provide
Provide идеально подходит для темы, текущего пользователя, локализации, контекста формы или конфигурации функции — значений, необходимых поддереву. Для одного-двух уровней обычные props всё ещё проще.
Область действия поставщика
Переданные значения действуют в пределах поддерева компонента-поставщика. Два соседних поддерева могут передавать разные значения под одним ключом, не влияя друг на друга.
Быстрая проверка
Как запретить потомкам изменять переданное состояние?
Повторение
Вы узнали, что provide(key, value) открывает данные для всех потомков. Передавайте ref, чтобы сохранить реактивность, оборачивайте его в readonly(), чтобы предотвратить изменения, передавайте функции как действия и предпочитайте ключи Symbol, чтобы избежать конфликтов.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «provide() в родительских компонентах» бесплатный?
Да — полный текст урока «provide() в родительских компонентах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «provide() в родительских компонентах»?
Передача примитивных значений, реактивных ссылок и объектов — сохранение реактивности через provide Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «provide() в родительских компонентах»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проблема передачи свойств через всю иерархию
- provide() в родительских компонентах
- inject() в дочерних компонентах
- Provide/Inject для состояния на уровне приложения