Vue3 关于 provide、inject 的用法
最新回答
跨步大
2025-03-30 08:57:50
场景再现
考虑这样一个场景，我们需要从一个较深层级的组件（爷爷组件）向其三级子组件（儿子组件）传递数据。我们尝试直接将数据通过props进行传递。
然而，这种方法并不适用于所有情况，特别是在组件层级较多或数据结构复杂时。为解决这一问题，Vue提供provide和inject。
传递Props
原本，如果我们直接通过props将数据从爷爷组件传至儿子组件，儿子组件只能接收到爷爷组件提供的数据。为了使儿子组件能够获取更深层次的数据，我们采用provide和inject。
提供数据
在爷爷组件中，使用provide方法将数据发布出去：
javascript
export default {
name: 'GrandFather',
provide() {
return {
message: '爷爷组件提供的数据'
};
}
};
注入数据
在儿子组件中，通过inject方法接收来自爷爷组件的数据：
javascript
export default {
name: 'Children',
inject: ['message'],
mounted() {
console.log('我接收到的数据:', this.message);
}
};
页面效果如下，儿子组件成功接收到爷爷组件提供的数据。
provide的进阶用法
除了基础的使用，provide还支持将函数作为值传递。例如，我们可以在爷爷组件中提供一个处理数据的函数，儿子组件通过inject接收到该函数，可以在需要时调用。
源码示例
javascript
export default {
name: 'GrandFather',
provide() {
return {
message: () => '爷爷组件提供的函数'
};
}
};
javascript
export default {
name: 'Children',
inject: ['message'],
mounted() {
this.message();
}
};
页面效果如下，儿子组件成功调用并执行了爷爷组件提供的函数。
思考题
如果爷爷组件和父亲组件同时提供了一个相同的关键词的值，儿子组件最后会使用谁的呢？答案是父亲组件的值会被使用。因为在注入时，Vue会优先从最近的父级组件中查找提供值。
热门标签
