面试题：Vue中Provide/Inject的基本使用场景及原理

Question

请阐述在Vue项目里，Provide/Inject主要用于解决什么问题，并且简单说明其工作原理。同时，给出一个简单的父子组件间使用Provide/Inject传递数据的代码示例。

Answer 1

1. 解决的问题

在Vue项目中，Provide/Inject主要用于解决组件间跨层级传递数据的问题，特别是在深度嵌套的组件树中，避免了通过多层组件手动传递数据的繁琐过程，使得数据可以更方便地在祖先组件和后代组件间共享。

2. 工作原理

• Provide选项是在祖先组件中定义的，它返回一个对象，这个对象中的属性会被注入到其所有子孙组件中。
• Inject选项则是在后代组件中定义，用于接收从祖先组件注入的数据。组件会在其自身以及其所有父组件的provide选项中查找指定的注入属性。

3. 代码示例

• 父组件（App.vue）

<template>
  <div id="app">
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      sharedData: 'This is shared data from parent'
    };
  }
};
</script>

• 子组件（ChildComponent.vue）

<template>
  <div>
    <p>{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData'],
  data() {
    return {
      injectedData: this.sharedData
    };
  }
};
</script>