vue注入怎么实现
Vue 依赖注入的实现方式
Vue 提供了 provide 和 inject API 来实现依赖注入，主要用于跨层级组件间共享数据或方法，避免逐层传递 props 的繁琐。
父组件提供数据（provide）
在父组件中使用 provide 选项或 setup 函数中的 provide 方法暴露数据：
// 选项式 API
export default {
provide: {
sharedData: '全局数据',
sharedMethod() {
console.log('共享方法');
}
}
}
// 组合式 API
import { provide } from 'vue';
export default {
setup() {
provide('sharedData', '全局数据');
provide('sharedMethod', () => {
console.log('共享方法');
});
}
}子组件注入数据（inject）
在子组件中使用 inject 选项或 setup 函数中的 inject 方法获取数据：
// 选项式 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');
return { data, method };
}
}响应式数据注入
若需注入响应式数据，需显式使用 ref 或 reactive：
import { provide, ref } from 'vue';
export default {
setup() {
const count = ref(0);
provide('count', count);
return { count };
}
}注入默认值
当上层未提供数据时，可设置默认值：
const value = inject('key', '默认值');使用 Symbol 避免命名冲突
推荐使用 Symbol 作为 key 确保唯一性：
// shared.js
export const MY_KEY = Symbol();
// 父组件
provide(MY_KEY, '数据');
// 子组件
inject(MY_KEY);注意事项
- 注入的数据在子组件中可直接使用，但应避免直接修改（除非父组件提供更新方法）。
- 主要适用于插件开发或深层嵌套组件通信，简单场景建议优先使用 props/emits。
- 注入的数据不是响应式的，除非显式使用响应式 API 包装。
