Use case analysis of provide/inject in vue

This time I will bring you a use case analysis of provide/inject in vue. What are the precautions when using provide/inject in vue. The following is a practical case, let's take a look.

Preface

I was looking at the source code of element-ui recently and found such a attribute:inject. Then I checked the official website provider/inject

provider/inject: Simply put, variables are provided through provider in the parent component, and then injected into the child component through inject.

It should be noted that no matter how deep the subcomponent is, as long as inject is called, the data in the provider can be injected. Instead of being limited to getting data only from the prop attribute of the current parent component.

Let’s verify our conjecture:

First: Define a parent component

<template>
 <p>
<childOne></childOne>
 </p>
</template>
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

Here we provide for this variable in the parent component.

Second Define a subcomponent

<template>
 <p>
  {{demo}}
  <childtwo></childtwo>
 </p>
</template>
<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

Third Define another subcomponent

<template>
 <p>
  {{demo}}
 </p>
</template>
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

In the 2 subcomponents we use jnject to inject the variable for provided by provide and add it Provided to the data attribute.

The official website here indicates that the example only works in Vue 2.2.1 or higher. Below this version, the injected value will be obtained after props and data are initialized.

Check the results after running

As can be seen from the above example, as long as it is called in the parent component, it will take effect in the parent componentLife cycle, all child components can call inject to inject the value in the parent component.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

Detailed explanation of the steps for Vue to use vee-validate to verify the form

The above is the detailed content of Use case analysis of provide/inject in vue. For more information, please follow other related articles on the PHP Chinese website!