Provide and inject in Vue are mechanisms for cross-level component communication. The parent component provides data through the provide and descendant components receive through inject without passing props layer by layer or using global state management. It is suitable for sharing stable configuration data such as topics, languages, etc. When used, the parent component returns the data to be shared in the provider, and the child component declares the required fields in the inject. Default values ??can be set to enhance fault tolerance. Note that ordinary values ??are not responsive and need to be responsively updated using ref or reactive packaging. Unlike Vuex/Pinia, provide/inject is suitable for local sharing within the component tree, while the state management library is more suitable for state sharing between complex logic and non-associated components. Rational use can improve development efficiency, but abuse should be avoided to cause unclear data flow.

In Vue, provide and inject are a mechanism for cross-level components communication. It does not require layers of downwards like props, nor does it require global state management like Vuex, but is a "shared data" method between the two. Simply put, the parent component provides data through provide , and the descendant component receives this data through inject , regardless of how many layers are separated.

Why use Provide/Inject?

Sometimes you may encounter the problem of a deeply nested child component that requires data or methods from an ancestor component, but you do not want to pass props layer by layer. At this time, it is more convenient to use provide/inject .

For example:

• You have a theme configuration (such as dark mode), and many components in the entire application need to adjust the style according to this configuration.
• You don't want to have the theme variables in Vuex or Pinia, nor do you want to pass props every time.
• At this time, you can provide topic variables in the outermost component and then use inject in any child component.

How to use it? Basic writing

Provide data in parent component (provide)

 export default {
  provide() {
    return {
      theme: 'dark',
      appName: 'MyApp'
    }
  }
}

The object returned here is the data you want to share with descendant components.

Inject data in the child component (inject)

 export default {
  inject: ['theme', 'appName'],
  template: `<div>The current theme is: {{ theme }}, and the application name is: {{ appName }}</div>`
}

You only need to declare which fields to use, and Vue will automatically find the corresponding data from the upper layer.

You can also add the default value:

 inject: {
  theme: { default: 'light' },
  appName: { from: 'myAppName', default: 'DefaultApp' }
}

Notes and suggestions

Although provide/inject is convenient, there are some things to pay attention to:

• Don't abuse : It is essentially a "implicit dependency" that makes the flow of data between components unclear and can be troublesome to debug.

• Suitable for stable configuration data : such as topics, languages, permissions, etc. that do not change frequently.

• Responsiveness is not automatic : if you are using normal values ??(such as strings, numbers), it will not be updated responsively. If you want to make the data responsive, you can wrap it with ref or reactive :

   import { ref } from 'vue'
  
  export default {
    setup() {
      const theme = ref('dark')
      provide('theme', theme)
      return { theme }
    }
  }

  In this way, what you get in the subcomponent is a responsive reference.

  ---

  What is the difference from Vuex/Pinia?

  • provide/inject is a local sharing within the component tree, suitable for specific scenarios between parent-child levels.
  • Vuex or Pinia is a global state management tool that is suitable for state sharing among multiple unrelated components.
  • If you just pass data between several components, provide/inject is lighter; if it involves complex state logic, it is recommended to use the state management library.

  ---

  In general, provide/inject is a set of practical tools provided by Vue to solve communication problems in certain specific scenarios. It is not complicated, but it is easily misused. Only by understanding its scope of application and limitations can it better play its role.

  Basically that's it.

  The above is the detailed content of What is Provide and Inject in Vue?. For more information, please follow other related articles on the PHP Chinese website!