Vue3报错 Extraneous non-props attributes (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

问题描述

打开页面控制台爆出这个错误，意思是额外的非prop属性（xxx）已传递给组件，但由于你的组件渲染片段和文本根节点，无法自动继承

通俗说就是在使用子组件的时候，传递了属性，但这个属性没有在子组件里定义

官方文档相关描述是透传 Attributes

解决办法

第一种：将传递给子组件的属性去掉

第二种：在子组件里使用defineProps定义后再传递

第三种：确确实实需要传递一个非prop属性数据到子组件中，但子组件中存在多个根节点，你可以在该根节点使用v-bind="$attrs"进行显式绑定