vue 是一款优秀的开源前端框架，它具备快速构建用户界面的能力，简化了开发流程，提高了产品的开发效率。vue 中提供了多种传递数据的方式，其中包括了 props、emit、$emit、vuex 等。而在组件层面使用 provide 和 inject，是一种更加灵活的方式，可以帮助我们实现跨组件传递方法和事件。在本文中，我们将重点讲解 vue 中使用 provide 和 inject 实现跨组件传递方法和事件的技巧。
- provide 和 inject 是什么？
provide 和 inject 是 Vue 中的高级组件传递方式，它允许父组件向距离自己较远的后代组件传递数据。我们可以通过在祖先组件中提供数据来让所有后代组件访问。
- 如何使用 provide 和 inject？
我们先以实现给多个组件绑定同一个方法为例来解释如何使用 provide 和 inject。
2.1 祖先组件提供方法
在祖先组件中，我们定义一个方法，并将它提供给所有子孙组件。代码如下：
立即学习“前端免费学习笔记（深入）”；
import { provide } from 'vue'
export default {
created() {
const commonMethod = () => { alert('hello world') }
provide('commonMethod', commonMethod)
}
}在这里，我们使用了 provide 方法来将 commonMethod 方法提供给所有子孙组件。provide 方法的第一个参数是提供的数据的键名，第二个参数是提供的数据的具体内容。
2.2 后代组件接收方法
在接收到提供的方法后，我们可以在所有后代组件中使用它。代码如下：
import { inject } from 'vue'
export default {
created() {
const commonMethod = inject('commonMethod')
this.$commonMethod = commonMethod
}
}在这里，我们使用了 inject 方法来接收 commonMethod 方法。inject 方法的参数是提供数据的键名，它会返回提供数据的值。在 created 生命周期中，我们将 commonMethod 方法绑定在实例的 $commonMethod 变量中，以便在组件中使用。
- 如何实现传递事件？
在实现跨组件传递事件时，我们需要借助 provide 和 inject 来实现。下面我们以实现点击一个 button 触发后代组件的事件为例。
3.1 祖先组件提供事件
在祖先组件中，我们引入一个事件类，并将它提供给所有后代组件。代码如下：
import { provide } from 'vue'
import { EventEmitter } from 'events'
export default {
created() {
const emitter = new EventEmitter()
provide('emitter', emitter)
}
}在这里，我们在祖先组件中新建了一个 EventEmitter 实例，并将它提供给后代组件。
3.2 后代组件监听事件
在后代组件中，我们使用 inject 方法获取提供的事件，并监听它，以便在事件触发后能够执行相应的逻辑。代码如下：
import { inject } from 'vue'
export default {
created() {
const emitter = inject('emitter')
emitter.on('event', () => {
console.log('emit event')
})
}
}在这里，我们使用了 inject 方法来接收提供的事件 emitter，并在 created 生命周期中监听了事件'event'。当事件触发后，我们执行相应的逻辑。
3.3 触发事件
在触发事件时，我们需要获取 emitter 并触发它。代码如下：
import { inject } from 'vue'
export default {
methods: {
emitEvent() {
const emitter = inject('emitter')
emitter.emit('event')
}
}
}在这里，我们使用了 inject 方法来获取提供的事件 emitter，并在 emitEvent 方法中触发了事件'event'。
- 总结
通过本文的介绍，我们学习了如何使用 provide 和 inject 实现跨组件传递方法和事件。在 Vue 的组件层面使用 provide 和 inject，可以让我们更灵活地传递数据和事件，有效地减少了模版或者 props 的复杂度。同时，provide 和 inject 也提供了类似 DI（依赖注入）的功能，让 Vue 的架构设计更具有扩展性和可维护性。
