淘宝双十一超级红包 》
Vue3 inject() 函数
Vue3 选项式 APIinject() 函数是 Vue3 提供的一个 API，用于在子组件中获取父组件或祖先组件通过 provide() 函数提供的依赖。它主要用于跨层级组件之间的数据传递，尤其是在组件树较深的情况下。
基本语法
实例
import { inject } from 'vue';
const value = inject(key, defaultValue);
const value = inject(key, defaultValue);
- key: 一个字符串或 Symbol，表示需要注入的依赖的唯一标识。
- defaultValue: 可选参数，如果未找到对应的依赖，则返回默认值。
使用场景
inject() 通常与 provide() 配合使用，适合以下场景：
- 跨层级组件通信：当组件层级较深时，通过
provide()和inject()可以避免逐层传递 props 的繁琐。 - 全局状态管理：在小型应用中，可以使用
provide()和inject()替代 Vuex 等状态管理工具。 - 插件开发：在插件中提供全局功能或配置时，
inject()是一个便捷的工具。
代码示例
父组件使用 provide() 提供数据
实例
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // 提供数据
}
};
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // 提供数据
}
};
子组件使用 inject() 获取数据
实例
import { inject } from 'vue';
export default {
setup() {
const message = inject('message', 'Default Message'); // 注入数据
return { message };
}
};
export default {
setup() {
const message = inject('message', 'Default Message'); // 注入数据
return { message };
}
};
注意事项
- 依赖的响应性：如果通过
provide()提供的数据是响应式的（如ref或reactive），在子组件中使用inject()获取的数据也会保持响应性。 - 默认值的作用：如果未找到对应的依赖，
inject()会返回默认值。建议始终设置默认值，以避免运行时错误。 - 避免滥用：虽然
provide()和inject()很方便，但滥用可能会导致组件之间的耦合度增加，建议仅在必要时使用。