父子组件，父孙组件之间的通信 provide与inject

一、概念

这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

二、场景

当子组件或孙组件想要使用父组件的变量或需要变更父组件的变量值时，通常使用props和$emit进行实现。父子组件之间的交互还较为方便，但一旦子组件的层级变深，超过2层或以上的场景时，组件之间的通信将变得不再方便，以此来使用provide与inject。
既可以调用父组件的数据，也可以调用父组件的方法

三、实例

// 父组件
<template>
	<div>
		{{testData}} // ’这是父组件的数据‘
		<son></son>
	</div>
</template>
export default {
  // 通过provide实现孙组件更新父组件的数据，在孙组件中的调用
  provide () {
    return {
      updateTestData: this.updateTestData,
      testData: this.testData
    }
  },
  data () {
    return {
	  testData: '这是父组件的数据'
	}
  },
  components: {
  	son: resolve => {
      require(["@components/son"], resolve);
    }
  },
   methods: {
  	 // 更新testData数据
     updateTestData(txt) {
       this.testData += txt
   	 }
   }
}

// 子组件
<template>
	<div>
		{{testData}} // ’这是父组件的数据‘
		<grandson></grandson>
	</div>
</template>
export default {
  inject: ['testData'],
  data () {
    return {
	}
  },
  components: {
  	grandson: resolve => {
      require(["@components/grandson"], resolve);
    }
  }
}

// 孙组件
<template>
	<div>
	</div>
</template>
export default {
  inject: ['updateTestData'],
  data () {
    return {
	}
  },
  created () {
  	setTimeout(() => {
  		this.updateTestData(', 现在被孙组件改变了')
  	}, 2000)
  }
}

当孙组件加载成功并执行完成时（定时器模拟真正的执行场景，2秒之后），父组件与子组件的testData变成了【这是父组件的数据, 现在被孙组件改变了】