vue注入怎么实现
Vue 依赖注入的实现方式
Vue 提供了 provide 和 inject API 来实现依赖注入，主要用于跨层级组件通信。以下是具体实现方法：
父组件或祖先组件提供数据
使用 provide 选项或函数式 API 提供数据：
// 选项式 API
export default {
provide: {
sharedData: '全局数据',
sharedMethod() {
console.log('共享方法');
}
}
}
// 组合式 API
import { provide } from 'vue';
export default {
setup() {
provide('sharedData', ref('响应式数据'));
provide('sharedMethod', () => {
console.log('共享方法');
});
}
}子组件或后代组件注入数据
使用 inject 选项或函数式 API 注入数据：
// 选项式 API
export default {
inject: ['sharedData', 'sharedMethod'],
created() {
console.log(this.sharedData);
this.sharedMethod();
}
}
// 组合式 API
import { inject } from 'vue';
export default {
setup() {
const data = inject('sharedData');
const method = inject('sharedMethod');
method();
return { data };
}
}注入默认值
可以为注入的值设置默认值，防止未提供时出错：
const value = inject('key', '默认值');响应式数据注入
当需要注入响应式数据时，建议在提供端使用 ref 或 reactive：
// 提供端
const count = ref(0);
provide('count', count);
// 注入端
const count = inject('count');注入校验
可以通过对象语法进行注入校验：
export default {
inject: {
sharedData: {
from: 'sharedData',
default: '默认值'
},
sharedMethod: {
from: 'sharedMethod',
default: () => {}
}
}
}使用场景建议
- 主题配置：注入主题颜色、样式等全局配置
- 国际化：注入翻译函数或当前语言
- 用户认证：注入用户信息或权限方法
- 全局状态：简单场景下替代 Vuex/Pinia
注意事项
- 注入的数据默认不是响应式的，除非提供的是响应式对象
- 应避免过度使用注入，组件间通信优先考虑 props/emit
- 注入会使组件间的耦合度增加，需谨慎设计
- 在生产环境中，建议为注入的 key 使用 Symbol 避免命名冲突
