面试题：Vue 中 Provide/Inject 如何实现动态注入

Question

在 Vue 项目里，假设你有一个多层嵌套的组件结构，父组件需要向深层子组件传递一个动态变化的数据。请描述使用 Provide/Inject 实现动态注入的思路，并给出关键代码示例。

Answer 1

思路

1. 在父组件中使用 provide 来提供数据，这个数据可以是响应式的，这样当数据变化时，注入的子组件能感知到。
2. 在深层子组件中使用 inject 来接收父组件提供的数据。

关键代码示例

• 父组件：

<template>
  <div>
    <child-component></child-component>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const dynamicData = ref('初始数据');

    const updateData = () => {
      dynamicData.value = '更新后的数据';
    };

    return {
      dynamicData,
      updateData
    };
  },
  provide() {
    return {
      dynamicData: this.dynamicData
    };
  }
};
</script>

• 深层子组件（假设 ChildComponent 嵌套多层后到达该子组件）：

<template>
  <div>
    <p>注入的数据: {{ injectedData }}</p>
  </div>
</template>

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