What is provide & inject in Vue and how to use it?

Vue.js is a very popular JavaScript framework in the current front-end world. It has many excellent features such as responsive data binding, componentized view architecture, dependency tracking, and template rendering. The most commonly used function is component programming. Vue provides us with functional tests such as component registration, component parameter passing, etc. However, in some cases, the transmission of component data will encounter more difficult problems. At this time , we can use the provide and inject provided in Vue to solve this type of problem.

Understanding provide & inject

provide

Vue2.2.0 version has added provide / inject, which can better help us complete object-oriented Programming needs. In layman's terms, provide is a process in which we can provide data in the parent component, and then use inject in the child component to obtain the required data.

Provide an example to better understand provide:

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

In the parent component, we provide a key with the key foo The data is given to the subcomponent. Then in the subcomponent we can get this data through inject.

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

At this point, we have implemented the complete process of provision and injection. Through provide we provide data in the parent component, and then use inject in the child component to obtain the data, thus completing the data transfer between components.

inject

inject is an array, and the property names to be injected are declared in the list. Inject an object into the subcomponent. The object's property name is the same as the provided key name, and its value is the provided data.

Provide a specific example to understand inject:

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

In the above code, the provide function can be understood as the parent component providing to the lower-level sub-component Data, the sub-component receives this data through inject, realizing the data transmission process.

Usage scenarios

At this point, you may ask: We already have props communication between parent and child components, why do we need provide/inject?

In fact, the two are not the same in usage scenarios. The following are some scenarios where provide/inject can be used to implement parent-child component communication:

1. Communication between cross-level components

In Vue, Communication between parent and child components can be achieved through props, but when cross-level components are used, passing data using props will become very cumbersome. At this time, you can provide data in the ancestor component through provide / inject, and then obtain the required data through inject in the descendant component.

2. The parent component does not know the specific implementation of the sub-component

In some cases, the parent component does not know which props the internal data of the sub-component is stored in. At this time, the data can be passed to the child component through provide.

3. You can use an observer to observe changes in values ​​to help implement component integration

Through the provide / inject method, we can put the data It is provided to descendant components and leaves an observation entrance for the parent to achieve component integration.

4. When it is not suitable to use props

In Vue, props are the only official and easy-to-use way to transfer data between father and son. . But in some cases, such as when multiple sub-components want to use the same global variables and provided public methods, you can use the provide / inject method.

Summary

Through the introduction of this article, we have learned about the basic usage of provide / inject provided in Vue, as well as their usage scenarios.

In the process of using provide / inject, we need to pay attention to three points:

1. provide / inject is mainly used for high-level Plug-in development does not need to be mastered by programmers who develop ordinary components.
2. The provide option should be an object or a function that returns an object. This object contains properties that can be injected into other components.
3. provide / inject The main problem solved is the information transfer between cross-level components, which is often used in plug-in development.

Finally, when we encounter problems such as cross-level component communication, we can use provide / inject to solve the problem. It provides us with a more convenient programming method. Make our code more concise and understandable.

The above is the detailed content of What is provide & inject in Vue and how to use it?. For more information, please follow other related articles on the PHP Chinese website!