vue3使用过程中的各种告警

传递多余的props + 子组件未明确声明接受 + 子组件多个根节点

当开发vue3项目时遇到报错，"Extraneous non-props attributes (XXX) were passed to component but could not be automatically inherited because component renders fragment or text root nodes."，便是遇到了vue3透传attribute的问题。默认情况下，当父组件传递给子组件props，而子组件却并未使用defineProps显示地声明接受，vue就会自动地将未声明接收的props作为attr绑定到子组件的根节点上，如果此时子组件的结构为非单一的根节点，那么就会产生不知道应该绑定到哪一个节点的混乱情况并报警。

解决方法：

1. 删除父组件中未被子组件显示声明接受的props，尤其注意直接v-bind绑定的属性
2. 将子组件的多个根节点包装在统一的标签如空白div中
3. 子组件显示地声明接收所有的props