1. 问题描述
在Vue开发中，我们常常使用provide和inject进行父组件和子组件之间的通信，但是有时我们会遇到如下报错：
[Vue warn]: Injection "xxx" not found这种报错一般是因为我们没有正确使用provide和inject，导致子组件无法正确获取父组件提供的数据。
2. provide和inject简介
provide和inject是Vue中用来实现组件通信的技术，其工作原理类似于React中的context。
2.1 provide
在父组件中定义provide选项，用来向子组件提供数据。provide选项是一个对象，对象的属性可以是任何类型的值，如字符串、数字、函数等等。
// 父组件中提供数据
export default {
provide: {
message: 'Hello Vue!'
},
// ...
}
2.2 inject
在子组件中定义inject选项，用来获取父组件提供的数据。inject选项是一个数组，数组的元素为父组件提供的数据的名称。
// 子组件中获取数据
export default {
inject: ['message'],
created() {
console.log(this.message)
},
// ...
}
3. 无法正确使用provide和inject进行插件通信问题原因
我们在使用provide和inject时会经常遇到Injection not found的错误，这个错误通常有以下几个原因。
3.1 未定义provide
首先，我们需要在父组件中定义provide选项，才能在子组件中使用inject获取父组件提供的数据。
// 父组件中未定义provide
export default {
// ...
}
3.2 错误的provide属性名
在provide选项中，我们需要使用正确的属性名提供数据，否则子组件无法正确获取数据。
// provide属性名错误
export default {
provide: {
notMessage: 'Hello Vue!'
},
// ...
}
3.3 错误的inject属性名
在inject选项中，我们需要使用正确的属性名称获取数据。
// inject属性名错误
export default {
inject: ['notMessage'],
created() {
console.log(this.message)
},
// ...
}
4. 解决无法正确使用provide和inject进行插件通信的问题
针对上述问题，我们可以采取以下解决方案。
4.1 明确提供的数据名称
在provide选项中，我们要明确提供数据的属性名称。
// 父组件provide属性名称
export default {
provide: {
message: 'Hello Vue!'
},
// ...
}
4.2 明确使用的数据名称
在inject选项中，我们要明确使用父组件提供的数据的属性名称。
// 子组件inject属性名称
export default {
inject: ['message'],
created() {
console.log(this.message)
},
// ...
}
4.3 使用provide和inject的组件必须在同一个组件树下
在Vue中，如果我们需要使用provide和inject进行组件通信，那么这两个组件必须在同一个组件树下。否则，子组件无法正确获得父组件提供的数据。
4.4 provide属性可以是一个函数
provide属性可以是一个函数，该函数返回的值可以提供额外的灵活性。子组件可以通过函数来动态获取提供的数据。
// 父组件provide属性是一个函数
export default {
provide() {
return {
message: 'Hello Vue!'
}
},
// ...
}
4.5 使用$parent访问父组件中的数据
在某些情况下，我们无法直接使用provide和inject进行组件通信，可以通过this.$parent访问父组件中的数据。
// 子组件中通过$parent访问父组件中的数据
export default {
created() {
console.log(this.$parent.message)
},
// ...
}
5. 总结
使用provide和inject可以快速实现Vue组件之间的通信，但是需要注意provide选项提供的数据名称和inject选项使用的数据名称必须匹配，否则会导致Injection not found错误。同时，使用provide和inject的两个组件必须在同一个组件树下。