Vue3如何向根组件传递事件监听器？

当然可以给根组件传递监听器回调，这里有两种实用的实现方式：

1. 通过createApp的第二个参数传递 #

Vue3中，createApp的第二个参数是根组件的props对象，组件的监听器可以通过on+事件名首字母大写的格式传入——这和子组件使用@click的底层逻辑完全一致（@click本质就是给组件传递onClick属性）。

示例代码：

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

// 定义回调函数
const myCallback = () => {
  console.log('根组件的点击回调触发了')
}

// 传递监听器到根组件
const app = createApp(MyComponent, {
  onClick: myCallback
})

app.mount('#app')

在根组件MyComponent.vue中，你可以通过$emit触发这个回调：

<template>
  <!-- 点击div时触发根组件的onClick回调 -->
  <div @click="$emit('click')">点击我触发回调</div>
</template>

2. 直接给根DOM元素绑定事件 #

如果你的需求是直接监听根组件渲染出的DOM元素事件，可以在挂载后通过根实例的$el属性获取DOM元素，然后绑定原生事件：

示例代码：

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const myCallback = () => {
  console.log('根DOM元素点击触发')
}

const app = createApp(MyComponent)
const rootInstance = app.mount('#app')

// 给根DOM元素绑定原生点击事件
rootInstance.$el.addEventListener('click', myCallback)

这种方式适合不需要通过组件内部逻辑触发，直接监听DOM原生事件的场景。

内容的提问来源于stack exchange，提问作者bakis