Vue.js RouterView绑定事件触发非必要非emits警告，求无需改子组件的解法

需要将RouterView渲染的子组件事件向上传递至顶级App.vue，当前在App.vue模板中直接给RouterView绑定事件监听：

<template>
    <Navbar />
    <component :is="$route.meta.layout || 'div'">
        <RouterView @display-modal="handleDisplayModal" />
    </component>
</template>

触发Vue控制台警告：

[Vue warn]: Extraneous non-emits event listeners (displayModal) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 
  at <Home onDisplayModal=fn<handleDisplaymodal> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView onDisplayModal=fn<handleDisplaymodal> > 
  at <LayoutBoxed> 
  at <App>

由于RouterView并非自定义组件无法声明emits，且希望无需修改所有已存在及未来新增的视图组件，寻求解决方案。
版本信息：vue: 3.2.47，vue-router: 4.1.6

方法一：全局事件总线（无需修改视图组件） #

通过全局事件总线实现跨组件事件传递，避开RouterView的事件绑定限制：

1. 注册全局事件总线（以mitt库为例，也可使用Vue实例）：

// main.js
import { createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'

const app = createApp(App)
// 注册全局事件总线
app.config.globalProperties.$bus = mitt()
app.mount('#app')

2. 在App.vue中监听事件：

<script>
export default {
  mounted() {
    // 监听事件
    this.$bus.on('display-modal', this.handleDisplayModal)
  },
  beforeUnmount() {
    // 组件卸载前移除监听，避免内存泄漏
    this.$bus.off('display-modal', this.handleDisplayModal)
  },
  methods: {
    handleDisplayModal() {
      // 你的事件处理逻辑
      console.log('触发弹窗展示')
    }
  }
}
</script>

3. 子组件中触发事件（仅替换$emit为$bus.emit）：

// 子组件内触发事件的位置
this.$bus.emit('display-modal')

方法二：Provide/Inject传递回调 #

通过Vue的依赖注入机制，将App.vue的回调函数传递给所有子组件：

1. App.vue中提供回调：

<script setup>
import { provide } from 'vue'

const handleDisplayModal = () => {
  // 你的事件处理逻辑
  console.log('触发弹窗展示')
}
// 提供回调函数
provide('handleDisplayModal', handleDisplayModal)
</script>

2. 子组件中注入并调用：

<script setup>
import { inject } from 'vue'

const handleDisplayModal = inject('handleDisplayModal')
// 需要触发时调用
const triggerModal = () => {
  handleDisplayModal?.()
}
</script>

方法三：高阶组件统一包裹路由组件 #

创建一个声明了emits的高阶组件，自动包裹所有路由组件，避免警告：

1. 创建Wrapper.vue：

<template>
  <component :is="component" @display-modal="$emit('display-modal', $event)" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  component: {
    type: Object,
    required: true
  }
})
defineEmits(['display-modal'])
</script>

2. 路由配置中批量包裹组件：

// router/index.js
import { createRouter, createWebHistory, h } from 'vue-router'
import Wrapper from '@/components/Wrapper.vue'
// 原始路由配置
const originalRoutes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  // 其他路由...
]

// 批量用Wrapper组件包裹所有路由组件
const routes = originalRoutes.map(route => ({
  ...route,
  component: () => {
    // 动态导入原始组件后，用Wrapper包裹
    return route.component().then(mod => ({
      render: () => h(Wrapper, { component: mod.default })
    }))
  }
}))

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

之后App.vue中仍可保留原有的RouterView @display-modal="handleDisplayModal"写法，且不会触发警告。

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