Detailed explanation of the steps to use provide/inject in vue

This time I will bring you a detailed explanation of the steps for using provide/inject in vue. What are the precautions for 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

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:

How to use vue to implement the 2048 mini game

How to use vee-validate in Vue

The above is the detailed content of Detailed explanation of the steps to use provide/inject in vue. For more information, please follow other related articles on the PHP Chinese website!