Vue 中如何使用 provide 和 inject 进行跨层级组件通信？

推荐答案

在 Vue 中，provide 和 inject 是一对用于跨层级组件通信的 API。provide 用于在父组件中提供数据，而 inject 用于在子组件中注入这些数据。这种方式特别适合在深层嵌套的组件树中进行数据传递。

示例代码

// www.javascriptcn.com code example
// 父组件
export default {
  provide() {
    return {
      theme: 'dark'
    };
  }
};

// 子组件
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme); // 输出: dark
  }
};

使用场景

• 当需要在多个嵌套组件之间共享数据时，provide 和 inject 可以避免通过 props 逐层传递数据的繁琐。
• 适用于全局配置、主题、用户信息等需要在多个组件中共享的数据。

本题详细解读

provide 和 inject 的基本概念

• provide: 在父组件中使用 provide 选项来提供数据。provide 可以是一个对象或返回对象的函数。
• inject: 在子组件中使用 inject 选项来注入父组件提供的数据。inject 可以是一个字符串数组或对象。

使用 provide 和 inject 的注意事项

1. 响应性: provide 和 inject 默认不是响应式的。如果需要响应式数据，可以通过 Vue.observable 或 ref/reactive（在 Vue 3 中）来实现。

   // www.javascriptcn.com code example
   // Vue 2 示例
   export default {
     provide() {
       return {
         theme: Vue.observable({
           color: 'dark'
         })
       };
     }
   };
   
   // Vue 3 示例
   import { ref, provide } from 'vue';
   
   export default {
     setup() {
       const theme = ref('dark');
       provide('theme', theme);
     }
   };

2. 命名冲突: 如果多个父组件提供了相同名称的数据，子组件会注入最近父组件提供的数据。

3. 依赖注入的局限性: inject 只能在当前组件的上下文中使用，不能在模板中直接使用。

示例扩展

假设我们有一个更复杂的场景，需要在多个嵌套组件中共享用户信息：

// www.javascriptcn.com code example
// 父组件
export default {
  provide() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    };
  }
};

// 子组件
export default {
  inject: ['user'],
  created() {
    console.log(this.user.name); // 输出: John Doe
  }
};

通过 provide 和 inject，我们可以轻松地在深层嵌套的组件树中共享数据，而不需要通过 props 逐层传递。