2023Vue 中使用 provide 和 inject 实现跨组件传递方法和事件的技巧

Vue 是一款优秀的开源前端框架，它具备快速构建用户界面的能力，简化了开发流程，提高了产品的开发效率。Vue 中提供了多种传递数据的方式，其中包括了 props、emit、$emit、vuex 等。而在组件层面使用 provide 和 inject，是一种更加灵活的方式，可以帮助我们实现跨组件传递方法和事件。在本文中，我们将重点讲解 Vue 中使用 provide 和 inject 实现跨组件传递方法和事件的技巧。

1. provide 和 inject 是什么？

provide 和 inject 是 Vue 中的高级组件传递方式，它允许父组件向距离自己较远的后代组件传递数据。我们可以通过在祖先组件中提供数据来让所有后代组件访问。

2. 如何使用 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 变量中，以便在组件中使用。

3. 如何实现传递事件？

在实现跨组件传递事件时，我们需要借助 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'。

4. 总结

通过本文的介绍，我们学习了如何使用 provide 和 inject 实现跨组件传递方法和事件。在 Vue 的组件层面使用 provide 和 inject，可以让我们更灵活地传递数据和事件，有效地减少了模版或者 props 的复杂度。同时，provide 和 inject 也提供了类似 DI（依赖注入）的功能，让 Vue 的架构设计更具有扩展性和可维护性。