Функция inject() в Vue3
Vue3 Options APIinject()Функция inject() — это API, предоставляемый Vue3, используемый в дочерних компонентах для получения зависимостей, предоставленных родительскими или вышестоящими компонентами черезprovide()функцию provide(). Она в основном используется для передачи данных между компонентами разных уровней, особенно когда дерево компонентов глубокое.
Базовый синтаксис
Пример
import { inject } from 'vue';
const value = inject(key, defaultValue);
const value = inject(key, defaultValue);
- key: Строка или Symbol, представляющие уникальный идентификатор зависимости для внедрения.
- defaultValue: Необязательный параметр. Если соответствующая зависимость не найдена, возвращается значение по умолчанию.
Сценарии использования
inject()Обычно используется вместе сprovide()и подходит для следующих сценариев:
- Межуровневое взаимодействие компонентов: Когда иерархия компонентов глубока, через
provide()иinject()это позволяет избежать хлопот с передачей props слой за слоем. - Глобальное управление состоянием: В небольших приложениях можно использовать
provide()иinject()чтобы заменить такие инструменты управления состоянием, как Vuex. - Разработка плагинов: При предоставлении глобальной функциональности или конфигурации в плагинах,
inject()это удобный инструмент.
Примеры кода
Родительский компонент использует provide() для предоставления данных
Пример
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // Предоставить данные
}
};
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // Предоставить данные
}
};
Дочерний компонент использует inject() для получения данных
Пример
import { inject } from 'vue';
export default {
setup() {
const message = inject('message', 'Default Message'); // Внедрить данные
return { message };
}
};
export default {
setup() {
const message = inject('message', 'Default Message'); // Внедрить данные
return { message };
}
};
Примечания
- Реактивность зависимостей: если данные, предоставленные через
provide()реактивны (например,refилиreactive), тогда в дочерних компонентах использованиеinject()для получения данных также останется реактивным. - Роль значений по умолчанию: если соответствующая зависимость не найдена,
inject()будет возвращено значение по умолчанию. Рекомендуется всегда задавать значение по умолчанию, чтобы избежать ошибок времени выполнения. - Избегайте чрезмерного использования: хотя
provide()иinject()очень удобен, чрезмерное использование может привести к усилению связи между компонентами. Рекомендуется использовать его только при необходимости.
Другие расширения