依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦

这一问题被称为“prop 逐级透传”

provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖

Provide (提供)

要为组件后代提供数据，需要使用到 provide选项

export default {
 provide: {
  message: 'hello!'
  }
}

也可以读取data中的数据

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

除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖

import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

Inject (注入)

要注入上层组件提供的数据，需使用 inject 选项来声明

export default {
 inject: ['message'],
 created() {
  console.log(this.message) // injected value
  }
}

注入会在组件自身的状态之前被解析，因此你可以在 data() 中访问到注入的属性

export default {
 inject: ['message'],
 data() {
  return {
   // 基于注入值的初始数据
   fullMessage: this.message
   }
  }
}

温馨提示

provide 和 inject 只能由上到下的传递，不能反向传递