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>