How to use provide and inject for cross-level component communication in Vue?

How to use provide and inject for cross-level component communication in Vue?

In the development of Vue, cross-level component communication is a common requirement. Vue provides a simple and efficient way to achieve cross-level component communication, that is, through provide and inject. This article will introduce how to use provide and inject in Vue to achieve cross-level component communication, and attach corresponding code examples.

First of all, we need to understand the basic concepts of provide and inject.

provide and inject are a special way in Vue for parent components to pass data to descendant components. Provide data by using provide in the parent component, and then use inject in the descendant component to get this data.

The provide option can be an object or a function. The key of the object will be used as the property name when using inject in the descendant component, and the value will be used as the data to be passed. If the provide option is a function, an object can be returned inside the function, and the key value of this object will be used as the data provided to descendant components.

In descendant components, you can use the inject option to inject data provided by the parent component. The inject option can be an array or object. If the inject option is an array, the elements of the array will be used as the property names to be obtained. If the inject option is an object, the object's key will be used as the property name and the value will be the provided default value.

Below we use an example to demonstrate how to use provide and inject for cross-level component communication.

In the parent component, we provide a data named message for the descendant component to use:

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide: {
    message: 'Hello, World!',
  },
};
</script>

In the child component, we use the inject option to get the data provided by the parent component, and in Use it in the template:

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'], // 这里使用数组形式注入要获取的数据
  computed: {
    injectedMessage() {
      return this.message;
    },
  },
};
</script>

Through the above code, we have successfully implemented the parent component to pass data to the child component, and obtained and displayed the data in the child component.

In addition to the inject option in array form, we can also use the inject option in object form to communicate across level components through provide and inject. For the inject option in object form, the key of each member will be used as the attribute name, and the value will be used as the default value of the attribute.

<template>
  <div>
    <GrandChildComponent></GrandChildComponent>
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';

export default {
  components: {
    GrandChildComponent,
  },
  provide() {
    return {
      greeting: this.greetings, // 将父组件中的greetings数据提供给后代组件使用
    };
  },
  data() {
    return {
      greetings: 'Hello, World!', // 作为提供给后代组件的数据
    };
  },
};
</script>

In the grandchild component, we use the inject option to get the data provided by the parent component and use it in the template:

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  inject: {
    greeting: {
      default: 'Hi, there!', // 设置greeting的默认值
    },
  },
};
</script>

Through the above code, we have successfully implemented the parent component to The grandchild component passes the data, and the data is retrieved and displayed in the grandchild component.

Summary:

Through provide and inject, we can easily achieve cross-level component communication. The parent component provides data through the provide option, and the descendant component obtains the data through the inject option. We can inject data using the inject option in array or object form. When using provide and inject for cross-level component communication, you need to pay attention to naming conflicts, and avoid using reactive data when using provide.

I hope this article can help you understand how to use provide and inject for cross-level component communication in Vue, and apply it to actual development.

The above is the detailed content of How to use provide and inject for cross-level component communication in Vue?. For more information, please follow other related articles on the PHP Chinese website!