Composition API 监听不到Vue2的事件|极客教程

Composition API 监听不到Vue2的事件

在Vue.js 3中，我们引入了Composition API来帮助我们更好地管理组件的逻辑。然而，有一些开发者发现在使用Composition API时，无法监听到Vue2中的一些事件。这篇文章将详细解释为什么在Composition API中无法监听到Vue2的事件，并提供解决方案。

为什么监听不到Vue2的事件

在Vue2中，我们可以通过$on方法来监听事件，例如：

// Vue2中监听事件的示例
this.$on('eventName', handler)

而在Vue3的Composition API中，并没有提供类似的方法来监听事件。相反，在Composition API中，我们更加倾向于使用watch来观察响应式状态的变化，而不是监听事件。因此，在Composition API中无法直接使用$on方法来监听事件。

另外一个原因是因为Vue3的设计思想更加独立和模块化，从而增加了组件的内聚性。因此，Vue3更加倾向于使用Props和Emitter来实现组件之间的通信，而不是简单的事件监听机制。

解决方案

使用$on

虽然在Composition API中没有提供直接的方法来监听事件，但我们可以通过provide和inject来模拟实现事件监听的功能。具体方法如下：

在父组件中，通过provide提供一个函数来触发事件：

import { provide } from 'vue'

const emitEvent = (eventName, ...args) => {
  window.dispatchEvent(new CustomEvent(eventName, { detail: args }))
}

provide('emitEvent', emitEvent)

在子组件中，通过inject获取父组件提供的函数，并监听事件：

import { inject, onMounted } from 'vue'

const emitEvent = inject('emitEvent', () => {})

onMounted(() => {
  window.addEventListener('eventName', (event) => {
    const args = event.detail
    // 处理事件
  })
})

通过这种方式，我们可以在Composition API中模拟实现Vue2中的事件监听功能。

使用Props和Emitter

另一个解决方案是使用Props和Emitter来实现组件之间的通信。在Vue3中，我们可以通过Props向子组件传递属性，并通过Emitter来触发事件。具体方法如下：

在父组件中，通过Props向子组件传递事件处理函数：

<template>
  <child-component @customEvent="handleEvent" />
</template>

<script>
import { ref } from 'vue'

export default {
  methods: {
    handleEvent(...args) {
      // 处理事件
    }
  }
}
</script>

在子组件中，通过Emitter触发事件：

import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup(props, { emit }) {
    const triggerEvent = () => {
      emit('customEvent', 'arg1', 'arg2')
    }

    onMounted(() => {
      triggerEvent()
    })

    return {}
  }
})