Vue 的 provide 和 inject

provide 和 inject 是 Vue.js 提供的两个 API，用于在组件之间进行数据的传递，特别是在组件的嵌套层级较深时。这种方式可以避免通过 props 逐层传递数据，从而简化组件间的通信。

目录

1. 什么是 provide 和 inject
2. 基本用法
   • 2.1 provide
   • 2.2 inject
3. 实际示例
4. 注意事项
5. 总结

什么是 provide 和 inject

• provide：用于在祖先组件中提供数据，任何后代组件都可以使用 inject 来访问这些数据。
• inject：用于在子组件中注入从祖先组件提供的数据。

这种方法特别适合在组件树较深的情况下传递数据，比如在插件、主题管理、状态管理等场景中。

基本用法

2.1 provide

在组件中使用 provide 来定义要提供的数据。可以提供一个对象或一个返回对象的函数。

import { provide } from 'vue';

export default {
  setup() {
    const theme = 'dark';
    
    // 提供数据
    provide('theme', theme);
  }
};

2.2 inject

在子组件中使用 inject 来获取祖先组件提供的数据。可以直接获取提供的数据。

import { inject } from 'vue';

export default {
  setup() {
    // 注入数据
    const theme = inject('theme');
    
    return {
      theme
    };
  }
};

实际示例

以下是一个完整的示例，展示如何在 Vue 3 中使用 provide 和 inject。

ParentComponent.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  setup() {
    const theme = 'dark';
    
    // 提供数据
    provide('theme', theme);
  }
};
</script>

ChildComponent.vue

<template>
  <div>
    <h2>Child Component</h2>
    <p>Current Theme: {{ theme }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 注入数据
    const theme = inject('theme');
    
    return {
      theme
    };
  }
};
</script>

注意事项

1. 响应性：provide 提供的对象是响应式的，但是如果是基本数据类型（如字符串、数字），那么在子组件中引用时不会自动响应变化。可以提供一个响应式对象来实现响应性。

   import { reactive, provide } from 'vue';
   
   export default {
     setup() {
       const state = reactive({ theme: 'dark' });
       provide('state', state);
     }
   };
   

   然后在子组件中注入时：

   const state = inject('state');
   

2. 依赖注入的层级：inject 只能获取到父级组件提供的数据，无法跨级访问。

3. 命名冲突：确保提供和注入的 key 唯一，以避免命名冲突。

总结

provide 和 inject 是 Vue.js 中用于组件间数据传递的强大工具，尤其在组件嵌套较深时可以简化数据传递的逻辑。通过合理使用这两个 API，可以提高组件的可读性和可维护性。