介绍
在 Vue.js 中，provide 和 inject 是一对用于父子组件之间通信的 API。通过 provide 提供数据，然后在子组件中使用 inject 来注入这些数据。这种方式可以帮助我们避免使用 props 和事件总线等方式来传递数据，从而简化组件之间的通信。
如何使用
在父组件中，我们可以使用 provide 来提供数据，如下所示：
provide() {
return {
message: 'Hello, World!'
}
}在子组件中，我们可以使用 inject 来注入这些数据，如下所示：
inject: ['message']
然后就可以在子组件中使用这些数据了，如下所示：
<template>
<div>{{ message }}</div>
</template>传递响应式数据
默认情况下，provide 和 inject 提供的数据不是响应式的。如果我们需要传递响应式数据，可以使用 Vue.observable() 方法来将数据转换为响应式对象，如下所示：
-- -------------------- ---- -------
------ --- ---- -----
------ ------- -
--------- -
------ -
----- ----------------
-------- ------- -------
--
-
-
-在子组件中，我们可以使用 Vue.observable() 方法来注入这些数据，如下所示：
import Vue from 'vue'
export default {
inject: ['data'],
mounted() {
Vue.set(this.data, 'message', 'Hello, Vue!')
}
}注意事项
- provide 和 inject 是非响应式的，如果需要传递响应式数据，需要使用 Vue.observable() 方法。
- provide 和 inject 可以跨越多个层级，但是不推荐过多使用，以免造成代码难以维护和理解。
- provide 和 inject 的命名需要保持一致，否则无法注入数据。
结论
使用 provide 和 inject 可以帮助我们更方便地在父子组件之间传递数据，避免了使用 props 和事件总线等方式来传递数据的繁琐和复杂。在实际开发中，我们可以根据具体情况来选择使用这种方式来进行组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6744127ff3dd653032a21428