'Extraneous non-emits event listeners were passed to component' warning?

[jez9999]

I'm using vue-router, and I'm trying to trigger a handler on my parent element by emitting an event from a child element. The code looks a bit like this:

Parent.vue

<template>
	<Navbar />
	<div :class="containerClass">
		<RouterView @setContainerClass="handleSetContainerClass" />
	</div>
</template>

Child.vue

<script setup>
	const emit = defineEmits(['setContainerClass']);

	function handleClick() {
		emit('setContainerClass');
	}
</script>

<template>
	<h2>Child</h2>
	<button class="btn btn-primary btn-sm mt-2" @click="handleClick">Fire event</button>
</template>

This works when Vue Router is rendering Child.vue, but for every other child component (which isn't explicitly doing a defineEmits(['setContainerClass'])) I get a console warning:

Extraneous non-emits event listeners (setContainerClass) 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.

Why am I getting this warning and how do I avoid it? I don't want to have to explicitly defineEmits(['setContainerClass']) on every child component, as most of them aren't going to emit that event.