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

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.

You are getting that warning because your Parent component has no single root element. This means that Vue cannot automatically bind attributes to the root element and that you therefore must manually bind them yourself.