How to use provide/inject in Vue to implement non-responsive data transfer between ancestor components and descendant components

Vue provides two high-level APIs: provide and inject, which can help developers perform non-responsive data transfer between ancestor components and descendant components. These data can be not only primitive values, arrays and objects, but also functions and classes.

In Vue, data transfer between components is generally divided into two types: responsive data transfer between parent and child components and between sibling components. However, sometimes we need to pass some non-responsive data between ancestors and descendants. At this time, the use of provide/inject becomes necessary.

provide and inject were introduced in Vue2.2.0 to solve the problem of data transfer between cross-level components. Previously, if we wanted to transfer data between parent components and child components, we usually implemented it through props and events. However, if we need non-responsive data transfer between ancestor components and descendant components, props and events are not suitable. At this time we need to use provide and inject.

Now, let’s look at an example:

<grand-parent>
    <parent>
        <child></child>
    </parent>
</grand-parent>

In this example, grand-parent is the ancestor component, parent is the child component, and child is the descendant component. We can use provide to provide some data in the grand-parent, and then use inject in the child to access this data.

First, we need to use provide to provide data in the grand-parent component:

provide: {
    someData: '这是一些数据'
}

Here we provide a non-responsive data named someData.

Then, use inject in the child component to access these data:

inject: ['someData'],

Here we use inject to inject someData data, so that we can access someData in the child component.

In addition to simple data types, we can also use provide to provide some functions and classes:

provide: {
    someMethod: this.doSomething,
    someClass: new MyClass()
}

In this example, we not only provide a method, but also provide a class Example. In descendant components, we can use inject to access these data:

inject: ['someMethod', 'someClass'],

Here we use inject to inject someMethod and someClass, so that we can access these data in descendant components.

It should be noted that since provide and inject are non-responsive, data changes will not be listened to. If we need to perform responsive data transfer, we should use props and events.

In summary, provide and inject are very useful APIs in Vue, which can help us perform non-responsive data transfer between ancestors and descendants. Provide and inject are a good choice when we need to pass some non-responsive data.

The above is the detailed content of How to use provide/inject in Vue to implement non-responsive data transfer between ancestor components and descendant components. For more information, please follow other related articles on the PHP Chinese website!