Communication between parent-child components and parent-child components provide and inject

One 、 Concept

This pair of options is used together . To allow an ancestor component to inject a dependency into all its descendants , No matter how deep the component level is , And it will always take effect when the upstream downstream relationship is established .
provide： It's an object , Or a function that returns an object . And it contains the things that will be given to future generations , That is, attributes and attribute values .
inject： An array of strings , Or an object . Property value can be an object , contain from and default The default value is .

Two 、 scene

When a child component or grandchild component wants to use the variables of the parent component or needs to change the variable value of the parent component , Usually use props and $emit To implement . The interaction between parent and child components is also more convenient , But once the level of sub components becomes deeper , exceed 2 Level or above , Communication between components will no longer be convenient , To use provide And inject.
You can call the data of the parent component , You can also call the methods of the parent component

3、 ... and 、 example

//  Parent component 
<template>
	<div>
		{
   {testData}} // ’ This is the data of the parent component ‘
		<son></son>
	</div>
</template>
export default {
  //  adopt provide Implement the sub component to update the data of the parent component , Call in the sub component 
  provide () {
    return {
      updateTestData: this.updateTestData,
      testData: this.testData
    }
  },
  data () {
    return {
	  testData: ' This is the data of the parent component '
	}
  },
  components: {
  	son: resolve => {
      require(["@components/son"], resolve);
    }
  },
   methods: {
  	 //  to update testData data 
     updateTestData(txt) {
       this.testData += txt
   	 }
   }
}

//  Child components 
<template>
	<div>
		{
   {testData}} // ’ This is the data of the parent component ‘
		<grandson></grandson>
	</div>
</template>
export default {
  inject: ['testData'],
  data () {
    return {
	}
  },
  components: {
  	grandson: resolve => {
      require(["@components/grandson"], resolve);
    }
  }
}

//  Sun component 
<template>
	<div>
	</div>
</template>
export default {
  inject: ['updateTestData'],
  data () {
    return {
	}
  },
  created () {
  	setTimeout(() => {
  		this.updateTestData(',  Now it has been changed by the sub component ')
  	}, 2000)
  }
}

When the sub component is loaded successfully and executed （ The timer simulates the real execution scenario ,2 Seconds later ）, Parent and child components testData Turned into 【 This is the data of the parent component , Now it has been changed by the sub component 】