在 Vue 2 中，provide 和 inject 的功能也是可以使用的，虽然在 Vue 3 中它们成为了组合式 API 的一部分。在 Vue 2 中，provide 和 inject 主要是用于祖先组件和后代组件之间的数据共享，而不是通过 props 和 emit 逐层传递。
Vue 2 中的 provide 和 inject
在 Vue 2 中，provide 和 inject 是 Vue 实例的一部分，可以在选项对象中的 data、methods、computed 或 created 等生命周期钩子中使用。
1. 祖先组件（提供数据）
在 Vue 2 中，祖先组件可以使用 provide 来提供数据。
// Parent.vue
export default {provide() {return {sharedData: 'Hello from parent' // 提供数据};},created() {console.log('Parent created');}
};
provide返回一个对象，其中包含需要共享的数据。- 可以通过
provide共享任意数据，后代组件可以通过inject访问。
2. 后代组件（注入数据）
后代组件可以使用 inject 来接收祖先组件提供的数据。
// Child.vue
export default {inject: ['sharedData'], // 接收数据created() {console.log(this.sharedData); // 输出 "Hello from parent"}
};
inject是一个数组，列出所有要接收的属性的名称。- 通过
this.sharedData可以访问从父组件提供的数据。
响应式数据
与 Vue 3 中的 provide 和 inject 类似，Vue 2 也支持响应式数据。如果需要响应式的数据共享，可以在祖先组件中使用 data 或 computed 来实现。
// Parent.vue
export default {provide() {return {sharedData: this.sharedData // 提供响应式数据};},data() {return {sharedData: 'Hello from parent'};}
};
后代组件中直接注入响应式数据：
// Child.vue
export default {inject: ['sharedData'],created() {console.log(this.sharedData); // 输出响应式数据 "Hello from parent"}
};
- 如果你在
data中使用响应式数据（如data()），provide提供的是响应式的引用。 - 后代组件访问后，数据是响应式的，任何修改都会反映在祖先和后代组件中。
使用默认值
如果在 inject 时，指定的键在祖先组件中没有提供，可以给 inject 设置默认值。默认值可以是一个普通的值或一个函数：
// Parent.vue
export default {provide() {return {sharedData: 'Hello from parent'};}
};// Child.vue
export default {inject: {sharedData: {default: 'Default Value' // 默认值}},created() {console.log(this.sharedData); // 如果没有找到父组件提供的数据，使用默认值}
};
- 如果父组件没有提供
sharedData，则会使用默认值'Default Value'。
注意事项
provide和inject主要用于父子或跨层级组件之间的通信，适合跨多个层级的数据共享，但不适合跨组件间的复杂数据管理。provide和inject不能替代 Vuex（用于跨组件和全局状态管理的方案），它们更适合用于深层组件之间的简单数据共享。inject会查找最近的祖先组件提供的数据，因此如果在多个组件中使用provide，后代组件会接收到最近的祖先提供的数据。
总结
provide：在父组件中定义共享的数据。inject：在子组件中接收父组件提供的数据。- 默认情况下，数据是非响应式的。如果需要响应式，应该在
data()中定义数据。 provide和inject适合处理不需要通过props或emit逐层传递的跨层级数据共享。