Vue 中provide / inject

inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，
value 是：在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
一个对象，该对象的：
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default 属性是降级情况下使用的 value
基本用法：
说直白点，就是可以祖孙传值，跨组件传值，传统的props只能父传子，而使用 provide/inject 不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。

代码执行顺序：
data
provide
created: 在这个阶段 $el 还未生成，在这先处理provide的逻辑，子孙组件才可以取到inject值
mounted

<template>
  <div id="app">
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {
      name: null,
      hasHouse: true
  },
// 父组件中在provide函数中返回要传给下级组件的数据
  provide () {
    return {
      getUserInfo: this.getUserInfo, // 调用事件
      name: () => this.name // 这种写法传递的属性是响应式的
    }
  },
  methods: {
    async getUserInfo() {
      await this.$nextTick()
      this.hasHouse = true
    }
  },
  created() {
	this.name = 'ZhangSan'
  }
}
</script>

<template>
	<div class="child-container">
		<child-component></child-component>
	</div>
</template>
<script>
import childComponent from './childComponent.vue'
export default {
  // 在需要的子组件中注入需要的provide属性或方法
  inject: ['getUserInfo', 'name'],
  components: {
    childComponent
  },
methods: {
	someMethod() {
		this.getUserInfo()
	},
	someMethod() {
		console.log(`name is: ${this.name}`)
	}
}
</script>