vue2组件跨层级数据共享provide 和 inject

在 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 逐层传递的跨层级数据共享。