Provide

要为组件后代提供数据

//普通形式
export default { 
provide: { message: 'hello!' }
}
//函数形式
provide() { 
// 使用函数的形式，
可以访问到 `this` return { message: this.message } 
}

Inject

接收上层组件的数据

//普通形式
export default { 
inject: ['message'],
//注入会在组件自身的状态**之前**被解析，因此你可以在 `data()` 中访问到注入的属性
data() {
 return 
 {
 // 基于注入值的初始数据
    fullMessage: this.message 
 } 
}
created() { 
 console.log(this.message) // injected value }
}

注入别名

export default {
  inject:
    { 
       /* 本地属性名 */
        localMessage:
             { 
                   from: /* 注入来源名 */ 'message' 
             }
    } 
}

注入默认值

export default {
  // 当声明注入的默认值时
  // 必须使用对象形式
  inject: {
    message: {
      from: 'message', // 当与原注入名同名时，这个属性是可选的
      default: 'default value'
    },
    user: {
      // 对于非基础类型数据，如果创建开销比较大，或是需要确保每个组件实例
      // 需要独立数据的，请使用工厂函数
      default: () => ({ name: 'John' })
    }
  }
}

和响应式数据配合使用

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    return {
      // 显式提供一个计算属性
      message: computed(() => this.message)
    }
  }
}

注: 上面的用例需要设置 app.config.unwrapInjectedRef = true 以保证注入会自动解包这个计算属性。这将会在 Vue 3.3 后成为一个默认行为，而我们暂时在此告知此项配置以避免后续升级对代码的破坏性。在 3.3 后就不需要这样做了。