vue警告：Extraneous non-props attributes (class) were passed to component

这个错误信息表明在你的 Vue 组件中存在一个常见问题：你向一个组件传递了额外的非 props 属性（这里是 class），但由于该组件的根节点是片段（fragment）或文本节点，无法自动继承这些属性。

问题原因分析：

当你在使用一个组件时传递了类似 class 这样的属性，但该组件的模板没有一个单一的根元素（而是使用了多个根元素或文本节点），Vue 无法确定应该将这些属性应用到哪个元素上，因此会抛出这个警告。

后面是发现Message.vue组件没有设置根节点，

<template><div class="w-100% relative flex justify-end items-center mb-0.85rem"><img class="w-100%" :src="getTitleImg(props.belongPage, props.type)" alt=""><el-icon v-show="props.belongPage === 'vehicle'" class="text-0.75rem absolute mr-0.875rem" @click="showFaultDialog = false"><CloseBold /></el-icon></div><div class="w-100% h-86%"><div class="w-100% h-100%"><Filter class="mb-0.75rem" @get-check="getCheck" /><div class="h-90% overflow-y-scroll"><!-- <Vue3SeamlessScroll ref="scrollRef" :list="props.data" :wheel="true" :step="0.5" hover is-watch> --><div v-for="item in filteredList" :key="item.msgID" class="flex flex-col bg-#000 bg-op-30 px-0.75rem py-0.375rem mb-0.375rem"><div><img class="w-1rem h-1rem mr-0.75rem" :src="getIcon(item.level)" alt=""><span class="text-0.8125rem leading-1.125rem mr-1.25rem" :style="{ color: getColor(item.level) }">{{ item.VehicleName }}-{{ item.carriageNo }}车</span><span class="text-0.8125rem leading-1.125rem" :style="{ color: getColor(item.level) }">{{ item.msgID }}</span></div><div class="flex justify-between text-0.8125rem leading-1.125rem color-#E0EBF8"><div class="w-50% text-truncate">{{ item.msgContent }}</div><div>{{ item.time }}</div></div></div><!-- </Vue3SeamlessScroll> --></div></div></div>
</template>

往最外层加了一个div包裹：

<template><div><div class="w-100% relative flex justify-end items-center mb-0.85rem"><img class="w-100%" :src="getTitleImg(props.belongPage, props.type)" alt=""><el-icon v-show="props.belongPage === 'vehicle'" class="text-0.75rem absolute mr-0.875rem" @click="showFaultDialog = false"><CloseBold /></el-icon></div><div class="w-100% h-86%"><div class="w-100% h-100%"><Filter class="mb-0.75rem" @get-check="getCheck" /><div class="h-90% overflow-y-scroll"><!-- <Vue3SeamlessScroll ref="scrollRef" :list="props.data" :wheel="true" :step="0.5" hover is-watch> --><div v-for="item in filteredList" :key="item.msgID" class="flex flex-col bg-#000 bg-op-30 px-0.75rem py-0.375rem mb-0.375rem"><div><img class="w-1rem h-1rem mr-0.75rem" :src="getIcon(item.level)" alt=""><span class="text-0.8125rem leading-1.125rem mr-1.25rem" :style="{ color: getColor(item.level) }">{{ item.VehicleName }}-{{ item.carriageNo }}车</span><span class="text-0.8125rem leading-1.125rem" :style="{ color: getColor(item.level) }">{{ item.msgID }}</span></div><div class="flex justify-between text-0.8125rem leading-1.125rem color-#E0EBF8"><div class="w-50% text-truncate">{{ item.msgContent }}</div><div>{{ item.time }}</div></div></div><!-- </Vue3SeamlessScroll> --></div></div></div></div>
</template>

警告就消失了。