Getting Started with VUE3: Using provide/inject to share between components

VUE is a modern front-end framework with the advantages of high ease of use, strong flexibility, and excellent performance. It is increasingly popular and favored by front-end developers. The VUE3 version brings better performance, better architectural design, and is more user-friendly. VUE3 provides a new way to share data between components - provide/inject. This article will introduce the usage and implementation process of provide/inject in detail.

Overview

provide/inject is a method officially recommended by VUE3 to share data between components. In VUE2, we often implement data communication between components through props/$emit and Vuex. The biggest feature of provide/inject is that it implements data sharing in a more implicit way, making the code more readable and maintainable.

Usage of provide/inject

Usage of provide/inject is very simple. Here are a few examples:

Parent component provides data

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

In In the parent component, we provide a data named message through the provide method and set its value to 'Hello from parent'. Then, we can use inject in the subcomponent to get this data:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

In the subcomponent, we use the inject method to get the data named message. At this time we can use this data in the template .

Subcomponent provides data

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

In this example, we define a responsive data named message in the parent component and set its value to 'Hello from parent'. We then provide this data to the child component via the provide method. In the child component, we obtain the message through the inject method and use it in the template:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

Note that the message data we define here is responsive.

Implementation process of provide/inject

The implementation of provide/inject relies on the new response system in VUE3. In VUE3, provide / inject relies on provideParent / injectSetupRef to work. The provideParent function is similar to the provide method, both receiving the key name and value of a data, while injectSetupRef is used to obtain data from the parent component. The specific implementation process is as follows:

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

In the provide function, we obtain the current instance through the getCurrentInstance function and store the provided data on the provides object of the current instance. If the current instance does not exist, it means that the provide function is not called in the setup function and a warning message is returned.

In the inject function, we also obtain the current instance through the getCurrentInstance function, and obtain the value corresponding to the key from the provides object of its parent component. If the value corresponding to key does not exist, defaultValue is returned. If the current instance does not exist, it means that the inject function has not been called in the setup function or functional component, and a warning message will be returned.

Summary

Through the introduction of this article, we can know that provide/inject is an excellent method for sharing data between VUE3 components. It implements data sharing in a more implicit way, making the code more readable and maintainable. During use, please note that the data provided is responsive and can be used in nested components. At the same time, it should be noted that if the data we provide does not exist in provide, the parameters passed in arguments[1] will be used as the default value. At this time, you need to always pay attention to the type and value of the parameters.

The above is the detailed content of Getting Started with VUE3: Using provide/inject to share between components. For more information, please follow other related articles on the PHP Chinese website!