面试题：Vue项目中依赖注入的基本使用

Question

在Vue项目里，简要说明如何使用`provide`和`inject`进行依赖注入，并且举例说明一个适合使用依赖注入的场景。

Answer 1

使用 provide 和 inject 进行依赖注入

1. 在父组件中使用 provide： 在父组件的 setup 函数中，通过 provide 来提供数据或方法。provide 接受两个参数，第一个是注入的 key，第二个是要注入的值。

   import { provide } from 'vue';
   export default {
     setup() {
       const sharedData = '这是共享数据';
       provide('sharedDataKey', sharedData);
     }
   };
   

2. 在子组件中使用 inject： 在子组件的 setup 函数中，通过 inject 来获取父组件提供的数据或方法。inject 接受一个参数，即父组件中 provide 的 key。

   import { inject } from 'vue';
   export default {
     setup() {
       const sharedData = inject('sharedDataKey');
       return {
         sharedData
       };
     }
   };
   

适合使用依赖注入的场景举例

场景：在一个多层嵌套的组件结构中，比如一个电商应用的商品展示模块。有一个顶层的 App 组件，中间层有 ProductList 组件，底层有 ProductItem 组件。ProductItem 组件需要展示当前网站的主题颜色（比如全局配置的亮色或暗色主题），而主题颜色在 App 组件中进行配置。

1. 在 App 组件中：

   import { provide } from 'vue';
   export default {
     setup() {
       const themeColor = 'light';
       provide('themeColorKey', themeColor);
     }
   };
   

2. 在 ProductItem 组件中：

   import { inject } from 'vue';
   export default {
     setup() {
       const themeColor = inject('themeColorKey');
       return {
         themeColor
       };
     }
   };
   

这样，无论 ProductItem 组件嵌套多深，都可以方便地获取到 App 组件提供的主题颜色，而不需要通过逐层传递 props 的方式，减少了组件之间的耦合。