Methods for implementing cross-component communication using provide/inject

In Vue applications, inter-component communication is a common requirement when building complex applications. Although parent-child components can be passedpropsand$emitThis method seems unscrupulous when sharing states across multiple levels of components or sibling components. ProvidedprovideandinjectAPI makes cross-component communication more concise and efficient. This article will explore in-depth how to use itprovideandinjectImplement cross-component communication in it and explain it step by step through sample code.

Scene setting

Suppose we are developing a task management application that contains a task list component (TaskList) and multiple task item components (TaskItem). and want to be in the top-level component of the application (App) defines a state (such as the currently selected task) in , and letTaskItemComponents can access and modify this state without having to pass layer by layer through each layer of components in the middle.

Step 1: Provide status in the top-level component

First, inAppIn the component, useprovideFunctions provide a state and a method so that descendants can access and modify this state.

// 
<script setup>
import { reactive, provide } from 'vue';
import TaskList from './components/';

const appState = reactive({
  selectedTask: null
});

const selectTask = (task) => {
   = task;
};

// Use provide to provide state and methodprovide('appState', appState);
provide('selectTask', selectTask);
</script>

<template>
  <TaskList />
</template>

Used in the above codereactiveCreated a responsive stateappState, and defines a methodselectTaskUsed to update this state. Then, throughprovideFunctions provide these to all descendants.

Step 2: Inject state in the child component

existTaskItemIn the component, useinjectFunctions are injected inAppThe state and methods provided in the component.

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

// Inject state and methodconst appState = inject('appState');
const selectTask = inject('selectTask');

const handleSelect = () => {
  selectTask('Current task');
};
</script>

<template>
  <div @click="handleSelect">Select a task：{{  }}</div>
</template>

In this example,TaskItemComponents can be accessed and modified directly byAppComponents providedappStateandselectTask, without passingpropsPass layer by layer.

Key points analysis

• Responsive state sharing：provideandinjectWith a responsive system, state sharing becomes very flexible in Vue applications. quiltprovideThe provided responsive states remain responsive in the descendant components, and any state changes are reflected in the components that depend on these states in real time.

• Type safety:AlthoughinjectA default value can be accepted, but for better type safety and code readability, it is recommended to use the same identifier when providing and injecting or use TypeScript type annotations.

• Use scenarios：provideandinjectEspecially suitable for developing cross-component level functions, such as theme switching, user preferences, global state management, etc. They provide more flexible architectural design possibilities for Vue applications.

Conclusion

By usingprovideandinject, The inter-component communication of applications becomes more flexible and efficient, especially when dealing with state sharing across component levels. This pattern not only reduces code redundancy, but also makes the component structure clearer, helping to build more maintainable and scalable Vue applications.

This is the article about using provide/inject to implement cross-component communication. For more related cross-component communication content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!